javascript - Angular 5 で「オンロード」イベントを行うにはどうすればよいですか?

Question

Javascript の onload="function()" のような関数 onload 要素を呼び出そうとしています。

これはコードです：

<div class="img-circle" [id]="pet.id" (load)="imgLoad( pet.id, pic )"></div>

関数は正常に動作しています。(クリック) で試してみると動作しますが、(ロード)、(オンロード)、(ロード) で試しても動作しません。

Answer 1

ホストリスナーを試してください。

@HostListener('document:click', ['$event'])
runThisMethod() {
  // your code goes here.
}

ドキュメント上でマウスをクリックすると、このメソッドが実行されます。ただし、カスタム div の場合は、ディレクティブ + HostListener を使用します。例:

<app-myComponent appChbgcolor> {{title}} </app-myComponent>
    @Directive({
        selector: '[appChbgcolor]'
    })

    export class ChangeBgColorDirective {
        constructor(private el: ElementRef, private renderer: Renderer) {
            this.ChangeBgColor('red');
        }

        ChangeBgColor(color: string) {
            this.renderer.setElementStyle(this.el.nativeElement, 'color', color);
        }

        @HostListener('onload') onClick() {
           window.alert('Host Element Clicked');
        }
    }