iframe wewnątrz komponentu angle2, właściwość 'contentWindow' nie istnieje w typie 'HTMLElement'

Question

Mam element iframe wewnątrz składnika angleular2 i próbuję zmienić zawartość elementu iframe, uzyskując dostęp do contentWindow.
Element iframe powinien zawierać prosty przycisk.

Mój kod:

import { Component } from '@angular/core'; 
    @Component({ 
     moduleId: module.id, 
     selector: 'component-iframe', 
     template: '<iframe id="iframe"></iframe>' 
    }) 
    export class ComponentIframe { 
     constructor() { 
     let iframe = document.getElementById('iframe'); 
     let content = '<button id="button" class="button" >My button </button>'; 
     let doc = iframe.contentDocument || iframe.contentWindow; 
     doc.open(); 
     doc.write(content); 
     doc.close(); 
    } 
    } 

Jeśli komentarz kod konstruktora i uruchomić aplikację, kompiluje i działa poprawnie. Następnie odkomentuję i wszystkie działają idealnie (przycisk jest obecny w elemencie iframe).

Gdybym decomment kod następnie uruchomić aplikację (początek npm) Mam błędów kompilacji z komunikatem:

własność 'contentWindow' nie istnieje w rodzaju 'HTMLElement'

.

Próbowałem również alternatywy umieszczania kodu konstruktora w ngOnInit(), ngAfterContentInit(), ngAfterViewInit(), ale błąd nadal występuje.

Answer 1

szablon nie istnieje w DOM jeszcze gdy konstruktor jest wykonywany

użyty zamiast

import { Component, ViewChild, ElementRef } from '@angular/core'; 
@Component({ 
    moduleId: module.id, 
    selector: 'component-iframe', 
    template: '<iframe #iframe></iframe>' 
}) 
export class ComponentIframe { 
    @ViewChild('iframe') iframe: ElementRef; 

    ngAfterViewInit() { 
    let content = '<button id="button" class="button" >My button </button>'; 
    let doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow; 
    doc.open(); 
    doc.write(content); 
    doc.close(); 
    } 
} 

Answer 2

Jeśli zawartość IFRAME jest tworzony przez samego pochodzenia potem Sugeruje użycie atrybutu IFRAME srcDoc do ustawiania i zmiany zawartości w IFRAME.

@Component({ 
    selector: 'my-app', 
    template: ` 
    <p><label for="text">Write content here...</label></p> 
    <textarea 
     #text 
     rows="10" 
     cols="47" 
     placeholder="Write some HTML content here..." 
     [(ngModel)]="srcDocContent"></textarea> 

    <p>Preview HTML content in IFRAME</p> 
    <iframe 
     sandbox="allow-same-origin" 
     [attr.srcDoc]="srcDocContent"></iframe> 
    ` 
}) 
export class App { 

    srcDocContent:string 

    constructor() { 
    this.srcDocContent='Some <strong>HTML</strong> content here...' 
    } 
} 

Zobacz ten PLUNKER DEMO

To pozwoli rodzimych elementów HTML nienaruszone pozostają zgodne z Kątowymi Universal.