onLoadが複数回Iframeで発生する

Question

Angular 2に問題がある場合は、iframeを持つコンポーネントを作成し、入力からソースを設定します。しかし、ロードするとonLoadを2回実行します.1つはsrc=''、もう1つは実際の入力URLです。

iframeをビューに配置すると、そのURLをフックする方法がわかりません。

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> 

更新

としてがDOMに追加される前に、イベントハンドラを要素に追加されたときにhttps://stackoverflow.com/a/15880489/217408 で説明。これはAngularがやっていることのようです。

要素がDOM

Plunker example

に追加された後に命令的イベントハンドラを追加しurlながらイベントを無視

Plunker example

Answer 2

nullである 'のonLoadは実行' 一度だけ、この例で動作します（http://plnkr.co/edit/wRZTH8?p=preview）。他に何か起こっていないと確信していますか？

import { Component , OnInit } from '@angular/core'; 
import { DomSanitizer} from '@angular/platform-browser'; 

@Component({ 
    selector: 'my-app', 
    template: `<iframe [attr.src]="url ? url : null" frameBorder="0" (load)="onLoad()" style="width:200px;height:200px"></iframe>` 
}) 
export class AppComponent implements ngOnInit{ 
    public url: any; 

    constructor(private sanitizer:DomSanitizer){ 

    } 

    ngOnInit()  
    { 
     this.url =  this.sanitizer.bypassSecurityTrustResourceUrl('http://www.nekkon.com'); 
    } 

    onLoad() { 
     console.log('onLoad executed'); 
    } 
}