Динамический компонент Angular теряет стиль при встраивании в iframe

Я не знаю, можете ли вы получить стили, связанные с компонентом, поэтому у вас осталось:

• создание объекта стиля (плохая идея, хотя)

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

• используйте привязку одного стиля или ngStyles к элементу h1 и надейтесь, что 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 {}