Angular img加载指令

我想做一个简单的指令。加载图像时，img src将被设置为@Input()字符串字段。在加载时，图像将被设置为原始的src值（或者至少我如何实现它）。Angular img加载指令

我用这里的答案： 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">-->

我错过了什么？

来源

2017-04-09 Jeff

你在做什么！微调图标？ – Aravind

是的。微调图标或类似的东西。 – Jeff

看看这个[答]（http://stackoverflow.com/questions/42963444/angular-2-material-progress-spinner-display-as-overlay/43243097#43243097） – Aravind

感谢@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>

来源

2017-04-09 00:28:39 Jeff

你可以调高你使用的答案 – Aravind

Angular img加载指令

回答

相关问题