onLoad使用Iframe多次发生

Question

在Angular 2中遇到一些问题,我正在创建一个具有iframe的组件并从输入中设置源.但是当它加载时,它会两次点击onLoad,一个点击src=''另一个点击,另一个点击实际的输入URL.

我似乎无法弄清楚当它被放入视图时如何将ifl挂钩为iframe.

export class ExternalComponent implements OnInit {
    @Input()
    url: string;

    private src: any;

    constructor(private sanitizer: DomSanitizer) {

    }

    ngOnInit()    
    {
        this.src = this.sanitizer.bypassSecurityTrustResourceUrl(this.url)
    }

    onLoad() {

    }
}

HTML:

<iframe [src]="src" frameBorder="0" (load)="onLoad()"></iframe>

复制:http://plnkr.co/edit/Dnpmv6X2IO3WGQAg0372？p =preview

谢谢

Answer 1

您可以尝试使用属性绑定,如果值为,则根本不添加 null

<iframe [attr.src]="src ? src = null" frameBorder="0" (load)="onLoad()"></iframe>

更新

如/sf/answers/1111634261/中所述, 在将事件处理程序添加到元素之前将<iframe>其添加到DOM中.这似乎是Angular正在做的事情.

在将元素添加到DOM后,必须添加事件处理程序

Plunker的例子

urlnull时忽略事件

Plunker的例子

Answer 2

使用调试器我发现event.target.src可以提供解决方案。第一次运行时，它是一个空字符串""。第二次该值是图像 url。所以，就我而言，它的工作原理是这样的：

onLoad(event: any) {
  if (event.target.src) {
      //do some stuff here
  }
}