Angular 2 iframe混淆

Question

我正在尝试更改Angular 2中iframe内部元素的值。我尝试了很多东西，但我一直无法使用getElementById()引用某个项目。我有一个测试场景，它适用于一个案例，而不是另一个案例，这使我更加困惑：

component.html

<iframe #iframe src="assets/test.html"></iframe>

的test.html

<h1 id="wow">Wow</h1>

工作打字稿（打印<h1 id="wow">Wow<h1>）

export class MyComponent implements AfterViewInit {

    @ViewChild('iframe') iframe: ElementRef;

    ngAfterViewInit() {
        var doc = this.iframe.nativeElement.contentDocument;
        doc.open();
        doc.write('<h1 id="wow">Wow</h1>');
        doc.close();
        console.log(doc.getElementById("wow"));
    }
}

非工作打字稿（打印null）

export class MyComponent implements AfterViewInit {

    @ViewChild('iframe') iframe: ElementRef;

    ngAfterViewInit() {
        var doc = this.iframe.nativeElement.contentDocument;
        console.log(doc.getElementById("wow"));
    }
}

问题

我怎样才能让第二个正确打印元素？无论我做什么或放在test.html中，它总是空的。

Answer 1

在ngAfterViewInit()内，可能还没有将test.html加载到iframe。

可以使用(load)="yourLoadFunction()" iframe上的<iframe (load)="yourLoadFunction()"></iframe>指令破坏这种情况，例如ngAfterViewInit()

如果您将代码从yourLoadFunction()移到@Configuration public class Config { @Bean public ConversionServiceFactoryBean conversionFacilitator() { ConversionServiceFactoryBean factory = new ConversionServiceFactoryBean(); factory.setConverters(getConverters()); return factory; } private Set<Converter> getConverters() { Set<Converter> converters = new HashSet<>(); converters.add(new MyConverter()); return converters; } } ，它应该可以正常工作。