Question

我正在mat-select内显示ngx-smart-dialog，当我打开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的模拟 css范围定义功能中的错误。但是，专职团队已意识到该问题，并将其视为其实施的可接受限制。我想我记得我曾听过一位Angular维护者的评论，说他们目前不知道以一种有效的方式解决此问题的方法（因此，我认为这不会改变）。同样，本机阴影DOM封装仅允许组件的CSS影响组件的子组件，因此在渲染叠加层时也会引起相同的问题（我相信规范也是出于性能原因做出此决定）。

总而言之，有两种方法可以将css放置在组件的css文件css文件中，并且仍然可以使事情工作（而不是将css放置在“全局” css文件中）。

Disable css scoping for the component using the @Component({encapsulation: ViewEncapsulation.None}) option.这将禁用组件的CSS作用域，使组件的所有CSS“全局”。与普通的“全局” css不同，在创建/销毁组件时会在DOM中添加和删除组件的css（因此，如果组件存在，则组件的css将仅位于DOM中）。
- 如果选择此选项，您仍然可以通过使用组件的元素选择器来手动将单个样式限定到组件。
将组件的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选择器在角度上已弃用，但是角度小组目前尚无删除选择器的计划，他们仍然建议您暂时使用它（如果需要）。
- ViewEncapsulation.Native和ViewEncapsulation.ShadowDom不支持::ng-deep选择器（并且不支持任何穿孔选择器）。

在模态对话框中显示垫选择

1 个答案: