Lokale Referenzvariable für dynamisch erstellten iFrame in angular2 setzen

Question

Wie setze ich lokale Referenzvariable für dynamisch erstellten iframe in angular2? Ich muss #dynIframe Variable zu Iframe hinzufügen. Wie man hinzufügen?

Answer 1

Ich würde versuchen, mit dem Iframe-Tag der Vorlage der Komponente hinzuzufügen. Dann nutzen Sie die Bindung des src-Eigenschaft auf Punkt an der aktuellen URL zu ändern:

@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 

    } 
} 

Update: Sie könnte so etwas wie diese versuchen, aber es wäre Kompilation der lokalen Vorlage var erfordern. Ohne die lokale Vorlage var sollte es aber funktionieren.

constructor(private elementRef: ElementRef) {} 

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

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