新窗口中未加载样式

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