在模态对话框中显示 mat-select

Question

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

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

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

提前致谢！

Answer 1

默认情况下，angular scopes a component's CSS / SCSS to a component 使用 Angular 自动创建的特殊属性选择器。这意味着组件样式仅影响该组件视图中的 DOM 元素。换句话说，组件的样式只影响作为组件的 子 的 DOM 元素。

mat-select 使用CDK overlay package（我认为它本身使用CDK portal）呈现覆盖窗格。 CDK 覆盖包renders the mat-select's overlay pane outside of your Angular application's root component (appended to the document body)。这意味着，尽管 mat-select 在组件的模板中，并且尽管 mat-select 元素是 DOM 中组件的子元素，但 mat-select 的覆盖窗格不是 DOM 中组件的子元素。这意味着您的组件的样式不会触及覆盖窗格（或任何其他不是您的组件子级的元素）。

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

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

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

2. 将组件的 css 范围设置为 ViewEncapsulation.Emulated（这是默认值）并使用 angular custom ::ng-deep pseudo selector 选择性地从组件的 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 选择器（并且不支持穿孔选择器）。