在angular2内部的iframe，'HTMLElement'类型中不存在属性'contentWindow' [英] iframe inside angular2 component, Property 'contentWindow' does not exist on type 'HTMLElement'

问题描述

我在angular2组件中有一个iframe，我试图通过访问contentWindow来更改iframe的内容。

iframe应该包含一个简单的按钮。

I have an iframe inside a angular2 component, and I am trying to change the content of the iframe by accessing the contentWindow.
The iframe should contain a simple button.

我的代码：

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

如果我评论构造函数的代码并启动应用程序，它编译并正确运行。然后我取消注释并完全运行（按钮出现在iframe中）。

If I comment the constructor's code and start the app, it compiles and runs correctly. Then I uncomment and all runs perfectly (the button is present in the iframe).

如果我取消代码然后启动应用程序（npm start）我有编译错误消息：

If I decomment the code then start the app (npm start) I have compilation bugs with the message:

属性'contentWindow'在类型'HTMLElement'上不存在

Property 'contentWindow' does not exist on type 'HTMLElement'

。

我还尝试了将costructor的代码放入ngOnInit（），ngAfterContentInit（），ngAfterViewInit（）的替代方法，但是错误仍然存​​在。

I also tried the alternative of putting the costructor's code into ngOnInit(), ngAfterContentInit(), ngAfterViewInit() but the error persists.

推荐答案

当执行构造函数时，DOM中不存在模板

The template doesn't exist in the DOM yet when the constructor is executed

改为使用

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

这篇关于在angular2内部的iframe，'HTMLElement'类型中不存在属性'contentWindow'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！