我如何在 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

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

所以...我改成了这个，并且有效

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

事件绑定（load、onload、loaded）不存在。

Answer 2

试试 HostListener。

@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

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

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

我如何在 Angular 5 中举办 "onload" 活动？

How I do an "onload" event in Angular 5?

javascript

events

event-binding

dom-events

angular