कोणीय 2 घटक के अंदर iframe, संपत्ति 'contentWindow' प्रकार 'HTMLElement'

Question

पर मौजूद नहीं है मेरे पास एक कोणीय 2 घटक के अंदर एक आईफ्रेम है, और मैं सामग्री तक पहुंचकर आईफ्रेम की सामग्री को बदलने की कोशिश कर रहा हूं।
आईफ्रेम में एक साधारण बटन होना चाहिए।

मेरे कोड:

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(); 
    } 
    } 

मैं निर्माता के कोड टिप्पणी और एप्लिकेशन शुरू करते हैं, यह संकलित करता है तथा सही ढंग से चलाता है। तब मैं असहज हूं और सभी पूरी तरह से चलते हैं (बटन आईफ्रेम में मौजूद है)।

अगर मैं decomment कोड तो एप्लिकेशन (NPM शुरू) शुरू मैं संदेश के साथ संकलन बग हो:

संपत्ति 'contentWindow' प्रकार पर मौजूद नहीं है 'HTMLElement'

।

मैंने लागतकर्ता के कोड को ngOnInit(), ngAfterContentInit(), ngAfterViewInit() में डालने का विकल्प भी प्रयास किया लेकिन त्रुटि बनी हुई है।

Answer 1

टेम्पलेट डोम में अभी मौजूद नहीं है जब निर्माता निष्पादित किया जाता है

उपयोग बजाय

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

IFRAME की सामग्री तो एक ही मूल द्वारा बनाई गई है अगर मैं आईएफआरएएम में सामग्री सेट और बदलने के लिए IFRAME विशेषता srcDoc का उपयोग करने का सुझाव देगा।

@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...' 
    } 
} 

इस PLUNKER DEMO

यह कोणीय यूनिवर्सल के साथ संगत रहने के लिए अछूता देशी HTML तत्वों दूँगी देखें।