Angular中如何为新窗口Portal绑定OverlayRef以应用组件样式？

问题原因 #

当组件直接挂载到新窗口的PortalOutlet时，Angular的视图封装（ViewEncapsulation）机制无法覆盖新窗口的DOM环境，导致组件的*.component.scss样式无法生效。以下是三种无需全局样式的解决方案：

方案一：利用Overlay配置挂载到新窗口DOM #

这是最贴合Angular CDK设计的方案，通过修改Overlay的容器配置，让Overlay直接挂载到新窗口的body中，组件样式会自动生效：

open<T>(...){
  ...
  // 创建Overlay时指定容器为新窗口的body
  const overlayConfig = new OverlayConfig({
    // 保留原有的positionStrategy、scrollStrategy等配置
    container: portalWindow.document.body // 关键配置
  });
  const overlayRef = this.overlay.create(overlayConfig);

  const comp = new ComponentPortal(component, null, injector);
  // 将组件挂载到新窗口的Overlay中
  overlayRef.attach(comp);
  ...
}

方案二：手动注入组件样式到新窗口 #

保持组件的视图封装，通过代码提取组件样式并注入到新窗口的head中：

1. 在对话框服务中注入依赖：

import { DomSanitizer } from '@angular/platform-browser';
import { Renderer2 } from '@angular/core';

constructor(
  private sanitizer: DomSanitizer,
  private renderer: Renderer2
) {}

2. 修改open方法：

open<T>(...){
  ...
  const comp = new ComponentPortal(component, null, injector);
  const componentRef = portalWindow.externalPortalOutlet.attachComponentPortal(comp);

  // 提取组件的样式并注入到新窗口
  const componentMeta = componentRef.componentType['ɵcmp'];
  if (componentMeta.styles.length) {
    const styleContent = componentMeta.styles.join('\n');
    const safeStyle = this.sanitizer.bypassSecurityTrustHtml(styleContent);
    const styleEl = this.renderer.createElement('style');
    this.renderer.setProperty(styleEl, 'innerHTML', safeStyle);
    this.renderer.appendChild(portalWindow.document.head, styleEl);
  }
  ...
}

方案三：限定作用域的无封装样式 #

给组件设置ViewEncapsulation.None，但通过唯一类名限定样式作用域，避免全局污染：

1. 修改组件元数据：

import { ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LoginComponent {}

2. 在组件SCSS中嵌套所有样式到唯一类下：

.app-login {
  // 组件根元素的类名
  .form-group {
    margin-bottom: 1rem;
  }
  // 其他组件样式都嵌套在此类下
}

3. 组件模板根元素添加类名：

<div class="app-login">
  <!-- 组件内容 -->
</div>

内容的提问来源于stack exchange，提问作者Travis