angular - 样式未在新窗口中加载

Question

我在这个 Stackblitz 上用最少的代码重现了这个问题.

我在新窗口中打开了我的部分组件，但它应该仍然能够与我的主应用程序交互。我用了DomPortalHost实现这一目标。交互成功，但样式未加载到新窗口中。

如何强制新窗口与主应用程序的样式相匹配？

主应用

窗口:

Answer 1

您的模态窗口不包含父窗口的 CSS 样式。所以你必须自己将它们克隆到新窗口，因为 cdk 门户不应该这样做。

在您的 ngOnInit 方法中添加以下步骤:

// STEP 5.1: clone stylesheets and style tags to external window
document.querySelectorAll('link, style').forEach(htmlElement => {
  this.externalWindow.document.head.appendChild(htmlElement.cloneNode(true));
});