我正在尝试制定一个简单的指令。加载图像时,img src 将设置为 @Input()
字符串字段。加载时,图像将设置为原始 src 值(或至少我尝试实现它的方式)。
我在这里使用了答案:
https://stackoverflow.com/a/38837619/843443
但不是指令,因此在我使用图像的任何地方都需要进行一些更改。
我的第一次尝试:
加载 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">-->
我错过了什么?
最佳答案
尝试这个
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">
关于Angular img 加载指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43301624/