新样式未加载 window

Question

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

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

如何强制新 window 匹配主应用程序的样式？

主应用程序

window:

Answer 1

您的模态 window 不包含父 window 的 CSS 样式。所以你必须自己将它们克隆到新的 window 因为 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));
});

Answer 2

1) 在包含 common css 的资产文件夹中创建一个 css 文件 component and external window 并在 index.html 或 css 中给出文件路径 angular.json 以便组件加载此 css。

index.html

<script>document.write('<link href="/assets/css/appstyles.css?v=' + Date.now() + '" rel="stylesheet" />');</script>

assets/css/appstyles.css

.pin-bg {
    background: pink;
    width: 255px;
    height: 20px;
}

2) 给出外部 window 的 css 路径为：-

this.externalWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="assets/css/appstyles.css"></head><body>');

window.component.ts

ngOnInit(){

// STEP 4: create an external window
 this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
 this.externalWindow.document.write('<html><head><style type="text/css">.pin-bg { background: pink; width:255px; height: 20px;}</style></head><body>');
}

或者，

ngOnInit(){
// STEP 4: create an external window
 this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
 this.externalWindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="assets/css/appstyles.css"></head><body>');
  }

assets/css/appstyles.css

.pin-bg {
    background: pink;
    width: 255px;
    height: 20px;
}

Stackblitz link:- https://stackblitz.com/edit/angular-open-window-tbd3a4?file=src/app/window.component.ts

Answer 3

另一种选择是使用内联样式： style="color:red;background-color:black;"

<window *ngIf="showPortal">
      <h2 style="color:red;background-color:black;">Hello world from amother window!!</h2>
      <div class="pin-bg">do you see pink ? do you?</div>
      <button (click)="this.showPortal = false">Close me!</button>
  </window>

新样式未加载 window

Style not loaded in new window

window

angular

angular-cdk

index.html

assets/css/appstyles.css

window.component.ts

或者，

assets/css/appstyles.css