在模式对话框内显示垫选择

Question

我正在显示 a mat-selectinside a ngx-smart-dialog，当我打开它时，select它显示在对话框后面。我用这个解决方案找到了这个和这个：

.cdk-global-overlay-wrapper, .cdk-overlay-container {
    z-index: 9999!important;
}

如果我将其放入全局文件中，问题就解决了.scss。我想知道的是（因为在我读到的内容中我没有找到解释）为什么将它放在组件的视图（即模态组件的视图）中它不起作用。

提前致谢！

Answer 1

默认情况下， Angular使用 Angular 自动创建的特殊属性选择器将组件的 CSS / SCSS 范围限定为组件。这意味着组件样式仅影响该组件视图中的 DOM 元素。换句话说，组件的样式仅影响作为组件子级的 DOM 元素。

mat-select使用CDK 覆盖包（我认为它本身使用CDK 门户）呈现覆盖窗格。CDK 覆盖包在Angular 应用程序的根组件（附加到文档）之外呈现 mat-select 的覆盖窗格body。这意味着，尽管mat-select位于组件的模板内，并且该mat-select元素是 DOM 中组件的子元素，但 mat-select 的覆盖窗格并不是 DOM 中组件的子元素。这意味着您的组件的样式不会触及覆盖窗格（或不属于您组件的子元素的任何其他元素）。

我自己之前就遇到过这个问题。就我个人而言，我认为这种行为是 Angular模拟css 作用域功能中的一个错误。然而，Angular 团队意识到了这个问题，并将其视为其实施的可接受的限制。我想我记得看到一位 Angular 维护者的评论，他们目前不知道如何以高性能的方式解决这个问题（所以我认为这不会改变）。类似地，原生 Shadow DOM 封装仅允许组件的 CSS 影响组件的子组件，因此这会在渲染覆盖时导致相同的问题（我相信规范也出于性能原因做出了此决定）。

综上所述，有两种方法可以将 css 放置在组件的 css 文件中，并且仍然可以正常工作（而不需要将 css 放置在“全局”css 文件中）。

1. 使用该选项禁用组件的 css 作用域@Component({encapsulation: ViewEncapsulation.None})。这会禁用组件的 css 作用域，从而使组件的所有 css 成为“全局”。与普通的“全局”css 不同，组件的 css 在创建/销毁组件时从 DOM 中添加和删除（因此，如果组件存在，则组件的 css 只会在 DOM 中）。
   • 如果选择此选项，您仍然可以使用组件的元素选择器手动将各个样式的范围限定到组件。

2. 将组件的 css 范围设置为ViewEncapsulation.Emulated（默认值），并使用角度自定义::ng-deep伪选择器有选择地从组件的 css 文件中的某些 css 样式中删除范围。

   例子： ::ng-deep { .cdk-global-overlay-wrapper, .cdk-overlay-container { z-index: 9999!important; } }

   • 选择::ng-deep器在 Angular 中已被弃用，但 Angular 团队当前没有删除选择器的计划，他们仍然建议您暂时使用它（如果需要）。
   • ViewEncapsulation.Native并且ViewEncapsulation.ShadowDom不支持::ng-deep选择器（并且不支持穿透选择器）。