将 HTML 附加到 iframe

Question

我想将 HTML 元素添加到 iframe，但每次检查源代码时，都没有添加任何内容。我的代码如下：HTML<div class="canvas-wrapper">  <iframe class="canvas" #canvas></iframe></div>打字稿import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';@Component({  selector: 'app-canvas',  templateUrl: './canvas.component.html',  styleUrls: ['./canvas.component.scss'],})export class CanvasComponent implements OnInit {  @ViewChild('canvas') canvas: ElementRef;  ngOnInit(): void {    this.addHtml();  }  addHtml(): void {    const canvas = this.canvas.nativeElement.contentDocument;    canvas.appendChild('<h1>TEST CONTENT</h1>');  }}

Answer 1

你应该使用另一个钩子：ngAfterViewInit

import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';

@Component({

  selector: 'app-canvas',

  templateUrl: './app.component.html',

})

export class CanvasComponent implements AfterViewInit {

  @ViewChild('canvas') canvas: ElementRef<HTMLFrameElement>;

  

  ngAfterViewInit(): void {

    this.addHtml();

  }

  addHtml(): void {

    const canvas = this.canvas.nativeElement.contentWindow.document.body;

    const el = document.createElement('h1');

    el.innerHTML = `Hello world`;

    canvas.appendChild(el);

  }

}

export default CanvasComponent;

你也可以使用

@ViewChild('canvas', {static: true}) canvas: ElementRef<HTMLFrameElement>;

并访问它

ngOnInit(){

    this.addHtml();

  }