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

Question

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

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

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

主应用

窗户：

标签： angularwindowangular-cdk

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