将事件侦听器添加到 Angular 中的 DOM 元素 4

Question

我想在 Angular 组件内向 iframe 加载事件 添加一个 事件侦听器。

我知道我可以使用 ViewChild 装饰器然后访问 element.nativeElement.addEventListener

但是，为了在处理 Angular 内部的 DOM 时遵守最佳实践，访问 nativeElement 上的 addEventListener 仍然被认为是独立于平台的吗？还是我将我的应用程序绑定到纯浏览器应用程序？

谢谢

Answer 1

你试过吗？

<iframe (load)="doSomething()">

它似乎适用于 stackblitz。

Answer 2

如果您想要 angular 方式，那么我建议您创建如下指令并将其附加到您的 dom 元素

@Directive({
  selector: `[IFrame]`
})
export class IFrameDirective {
  constructor(private el: ElementRef, private renderer: Renderer) { }

  @HostListener('load', ['$event'])
  iFrameLoad(event: Event) {
    alert('IFrame loaded');
  }
}

指令中的

@HostListener 允许您将事件与指令绑定的宿主元素绑定。

html

<iframe IFrame> ..rest code

将事件侦听器添加到 Angular 中的 DOM 元素 4

Add event listener to DOM element in Angular 4

angular

angular-dom-sanitizer