angular2で動的に作成されたiframeのローカル参照変数を設定する

Question

angular2で動的に作成されたiframeのローカル参照変数を設定するにはどうすればよいですか？ #dynIframe変数をiframeに追加する必要があります。追加方法？

Answer 1

私はコンポーネントのテンプレートにiframeタグを追加することから始めようとします。そして、実際のURLを指すようにsrcプロパティを変更するバインディングを使用：

@Component({ 
    selector: 'my-app', 
    template: ` 
    ... 
<iframe #dynIframe type="text/html" [src]="iframeUrl"></iframe>` 
}) 
export class MyComponent{ 
    iFrameUrl: string = 'about:blank'; 

    assignIframeUrl() { 
    ... 
    this.iFrameUrl = // assign actual URL here 

    } 
} 

更新：あなたはこのような何かを試みることができるが、それは地元のテンプレートVARのコンパイルが必要になります。ローカルのテンプレート変数がなければ、それはうまくいくはずです。

constructor(private elementRef: ElementRef) {} 

ngOnInit(){ 
    const component: HTMLElement = this.elementRef.nativeElement; 

    let iFrame = document.createElement(' <iframe #dynIframe...> '); 
    component.appendChild(iFrame); 
}