样式未在新窗口中加载

时间：2019-07-07 08:21:48

标签： angular window angular-cdk

我在此Stackblitz上以最少的代码重现了该问题。

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

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

主应用

enter image description here

窗口：

enter image description here

3 个答案:

答案 0 :(得分：3)

您的模式窗口不包含父窗口的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));
});

答案 1 :(得分：1)

1）在资产文件夹中创建一个css文件，其中包含common 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）将外部窗口的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链接：- https://stackblitz.com/edit/angular-open-window-tbd3a4?file=src/app/window.component.ts

答案 2 :(得分：0)

另一个选择是使用内联样式： 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>

相关问题
最新问题