javascript - 我如何在 Angular 5 中执行“onload”事件？

Question

我正在尝试调用函数 onload 元素，例如 Javascript 中的 onload="function()" 。

所以这是代码：

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

功能工作正常，我尝试使用 (click) 并工作，但我尝试使用 (load)、(onload)、(loaded) 并且不工作。

Answer 1

替换 onload 函数的正确方法是使用ngOnInit. 只需OnInit在应用程序组件上实现。

更多信息：https ://angular.io/api/core/OnInit

Answer 2

尝试主机监听器。

@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');
        }
    }

Answer 3

在我的函数中，我尝试在此 div 中应用样式，参数是设置背景图像：url(base64);

所以......我改成这个，并且工作

[ngStyle]="{ 'background-image': 'url(' + pic + ') '}

事件绑定 (load,onload,loaded) 不存在。