angular14在iframe中创建组件

Question

我正在构建一个角14应用程序，它可以让用户在页面中创建和移动一些元素(比如管理面板)。

内部页的内容由iframe分隔和导入。

因此，当用户按下Add Image按钮时，应该在具有id="content"的div元素中添加名为view的新组件。

这就是我创建的逻辑：

@ViewChild('iframe') iframe: ElementRef;
  ngAfterViewInit(): void {
    this.loadIframe(this.iframe.nativeElement);
  }

  loadIframe(iframe: HTMLIFrameElement) {
    const doc = iframe.contentDocument;
    this.blocks$.subscribe(block=>{
      this.blocks$.subscribe(blocks=>{
      if(blocks != undefined && blocks.length > 0) {
        const component = this.vcRef.createComponent(ViewImageComponent);
        component.instance.bgColor = blocks[0].design.design.backgroundColor;
        component.instance.image = blocks[0].design.imageUrl;
        component.instance.imageAlt = blocks[0].design.imageAltText;
        component.instance.radius = blocks[0].design.design.borderRadius;
        component.instance.padding = blocks[0].design.design.padding;
        doc.querySelector('#content').appendChild(component.location.nativeElement);
      }
    })
  }

块$属性包含用户创建的存储在ngrx存储区中的块。

这是我的iframe

<iframe id="pageFramenobanner" src="/assets/page-edit-content.html" width="100%" #iframe></iframe>

所以问题是在iframe内部没有创建任何元素，控制台中也没有错误。

我确信块$属性不是空的，数据显示在中

Answer 1

我通过在模板中调用方法loadIframe来解决这个问题，而不是像这样在ngAfterViewInit中调用它：

  <iframe id="pageFramenobanner" src="/assets/page-edit-content.html" width="100%" #iframe (load)="loadIframe(iframe)"></iframe>

因此，AfterViewInit钩子似乎不会等待iframe加载

希望这能帮到别人。