Стиль не загружен в новом окне - PullRequest
Новая
       66

Стиль не загружен в новом окне

4 голосов
/ 07 июля 2019

Я воспроизвел проблему с минимальным кодом на этом Stackblitz .

Я открыл часть моего компонента в новом окне, НО он все еще мог взаимодействовать с моим основным приложением. Я использовал DomPortalHost для достижения этой цели. Взаимодействие работает успешно, но стиль не загружается в новое окно.

Как заставить новое окно соответствовать стилю основного приложения?

Основное приложение

enter image description here

Окно:

enter image description here

Ответы [ 3 ]

3 голосов
/ 09 июля 2019

Ваше модальное окно не содержит стили 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 голос
/ 14 июля 2019

1) создайте один файл CSS в папке ресурсов, который содержит common css оба для component and external window и укажите путь к файлу CSS в index.html или в angular.json чтобы компонент загружал этот css.

index.html 

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

активы / 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>');
  }

активы / 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

0 голосов
/ 15 июля 2019

Другой вариант - использовать встроенный стиль: 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>
...