Question

我想在Angular Component中的 iframe加载事件中添加事件监听器。

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

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

由于

Answer 1

你试过这个吗？

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

它似乎适用于stackblitz。

Answer 2

如果你想要角度方式，那么我建议你创建如下所示的指令并将它与你的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 4中向DOM元素添加事件侦听器

2 个答案: