Как я могу получить значение src изображения, используя директиву Angular 2+?

Question

Начиная с заголовка, я хотел бы понять, как получить значение src изображения, используя директорию

Директива:

@Directive({
    selector: '[appLazyImage]',
})
export class LazyImageDirective implements OnInit {

    @HostBinding('src') public src: string;
    @Input() private appLazyImage: string;

    constructor() {}

    public ngOnInit() {
        //this.src is undefined
        console.log(this.appLazyImage, this.src);
    }

}

Html:

<img [appLazyImage]="'test'" class="product-content-image__img" [src]="{{url}}" alt="{{alt}}" title="{{title}}" />

Answer 1

Используйте nativeElement для получения значений атрибутов.

 constructor(elm: ElementRef) {
    let src = elm.nativeElement.getAttribute('src'); 
  }

Answer 2

Использование службы ElementRef для получения атрибута Src

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

@Directive({
  selector: '[appSrc]'
})
export class SrcDirective {

  constructor(private el: ElementRef) {
    console.log(this.el.nativeElement.src);
  }

}