Angular 动态组件嵌入 iframe 时会丢失样式

Question

我需要一个动态组件嵌入到 iframe 中。我见过的唯一方法是使用 createComponent 动态生成给定组件的新实例，然后将其移动到 iframe 的主体中。

这种方法的问题是没有样式继承，因为动态组件是在父页面中生成并复制过来的——但是，样式是在父页面的头部注入的，而不是随之而来。

我的想法是解决这个问题的方法是想出一种方法来手动将生成的样式迁移到 iframe 中，或者以某种方式在 iframe 本身内生成组件，以便在其中呈现样式。

这是一个问题示例：https://stackblitz.com/edit/angular-ivy-ajo1gy?file=src/app/app.component.ts

非常感谢任何建议或想法！感谢收看！

Answer 1

我不知道你是否可以获得与组件相关的样式，所以你只剩下：

• 创建样式对象（虽然是个坏主意）

public ngAfterViewInit(): void {
    setTimeout(() => {
      // get reference to loaded iframe document
      this.frameDoc =
      this.contentFrame.nativeElement.contentDocument ||
      this.contentFrame.nativeElement.contentWindow;
      this.frameDoc.body.appendChild(this.contentRef.location.nativeElement);
      const style = document.createElement("style");
      style.innerHTML = `
      h1 {
        color: blue;
      }
      `;
      this.frameDoc.body.appendChild(style);
    }, 1000);
  }

• 使用 single style binding or ngStyles on h1 element 并希望 this.contentRef.location.nativeElement 在 iframe 中包含计算的内联样式（没有测试出来）。

@Component({
  selector: "hello",
  template: `<h1 [style.color]="'blue'">Content Window - I should be blue</h1>`
})
export class HelloComponent {}

@Component({
  selector: "hello",
  template: `
    <h1 [ngStyle]="{'color': 'blue'}">Content Window - I should be blue</h1>`,
})
export class HelloComponent {}