Eu estou tentando fazer uma diretiva simples. Quando a imagem está carregando, o img src será definido como um@Input() campo de string. No carregamento, a imagem será definida como o valor original do src (ou pelo menos como estou tentando implementá-lo).

Eu estava usando a resposta aqui:https://stackoverflow.com/a/38837619/843443 mas não é uma diretiva e, portanto, exigiria várias alterações sempre que uso imagens.

Minha primeira tentativa:

loading-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;
  }

}

de:

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

para:

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

Erro:

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

o que estou perdendo?