角度 img 加载指令答案

【问题标题】：Angular img loading directive角度 img 加载指令
【发布时间】：2017-09-04 05:24:50
【问题描述】：

我正在尝试制定一个简单的指令。加载图像时，img src 将设置为@Input() 字符串字段。加载时，图像将设置为原始 src 值（或至少我尝试实现它的方式）。

我在这里使用了答案： https://stackoverflow.com/a/38837619/843443 但 is 不是指令，因此在我使用图像的任何地方都需要进行一些更改。

我的第一次尝试：

加载-img.directive.ts：

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
  selector: '[tohLoadingImg]'
})
export class LoadingImgDirective {
  imgSrc: String;

  @Input()
  spinnerSrc: String;

  constructor(private el: ElementRef) {
    this.imgSrc = el.nativeElement.src;
    el.nativeElement.src = this.spinnerSrc;
  }

  @HostListener('load') onLoad() {
    this.el.nativeElement.src = this.imgSrc;
  }

}

来自：

<img src="{{hero.imgUrl}}" alt="Random first slide">

到：

<img src="{{hero.imgUrl}}" alt="Random first slide" [tohLoadingImg]="'/assets/ring.svg'">

错误：

Can't bind to 'tohLoadingImg' since it isn't a known property of 'img'. (".imgUrl}}" alt="Random first slide">-->

我错过了什么？

【问题讨论】：

你想做什么！微调器图标？
是的。微调器图标或类似的东西。
看看这个answer
也许我没听懂...我试图在 img 标签上制作自定义指令...您是否建议只制作一个本质上是 img 包装器的组件？我想我可以做到……只是检查一下。
是的。使用它作为组件是最好的实现方式。

标签： angular angular-directive

【解决方案1】：

试试这个

import {
  Directive,
  Attribute,
  Renderer2,
  ElementRef,
  HostListener } from '@angular/core';

@Directive({
  selector: '[uiImageLoader]'
})
export class UiImageLoaderDirective {
  constructor(
    @Attribute('loader') public loader: string,
    @Attribute('onErrorSrc') public onErrorSrc: string,
    private renderer: Renderer2,
    private el: ElementRef) {
      this.renderer.setAttribute(this.el.nativeElement, 'src', this.loader);
    }

  @HostListener('load') onLoad() {
    this.renderer.setAttribute(this.el.nativeElement, 'src', this.el.nativeElement.src);
  }
  @HostListener('error') onError() {
    this.renderer.setAttribute(this.el.nativeElement, 'src', this.onErrorSrc);
  }
}

用法

<img
  uiImageLoader
  onErrorSrc="/assets/images/no-available-800.png"
  loader="/assets/images/image-loader.svg"
  [src]="post.imagePath" [alt]="post.title">

【讨论】：

【解决方案2】：

感谢@Aravind 的指导。这就是我解决它的方法（通过使用组件而不是指令）：

微调器-img.component.ts：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'toh-spinner-img',
  templateUrl: './spinner-img.component.html',
  styleUrls: ['./spinner-img.component.scss']
})
export class SpinnerImgComponent implements OnInit {

  @Input() imgSrc: String;
  @Input() spinnerSrc: String;
  @Input() imgContainerClass: String;

  loading: boolean = true

  onLoad() {
    this.loading = false;
  }

  constructor() { }

  ngOnInit() { }

}

微调器-img.component.html：

<div [class]="imgContainerClass">
  <img *ngIf="loading" src="{{spinnerSrc}}" alt="loading"/>
  <img [hidden]="loading" (load)="onLoad()" src="{{imgSrc}}" alt="Hero Pic"/>
</div>

并在使用中：

 <toh-spinner-img [imgSrc]="hero.imgUrl" [spinnerSrc]="'/assets/ring.svg'"></toh-spinner-img>

【讨论】：