在模态对话框中显示垫选择 [英] Displaying a mat-select inside a modal dialog

问题描述

我正在ngx-smart-dialog内显示一个mat-select，当我打开select时，它显示在对话框的后面.我发现了此和

I am displaying a mat-select inside a ngx-smart-dialog, when I open the select it shows behind the dialog. I found this and this with this solution:

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

如果我将其放在全局.scss文件中，则可以解决此问题.我想知道的是(因为在我阅读的书中没有找到任何解释)为什么将其放在组件的视图(即模式组件的视图)中是行不通的.

That's solves the issue if I put it in the global .scss file. What I want to know is (because in what I read I didn't find an explanation) why putting it inside the component's view (i.e., the modal component's view) it doesn't work.

提前谢谢！

推荐答案

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

By default, angular scopes a component's CSS / SCSS to a component using a special attribute selector that Angular automatically creates. This means that component styles only affect DOM elements in that component's view. Put another way, the component's styles only affect DOM elements which are children of the component.

mat-select使用 CDK覆盖包( think使用本身的 CDK门户). CDK覆盖程序包将Mat-select的覆盖窗格 outside Angular应用程序的根组件(附加到文档body).这意味着，尽管mat-select在组件​​的模板内，并且尽管mat-select元素是DOM中组件的子元素，但是mat-select的覆盖窗格不是DOM中组件的子元素.这意味着您组件的样式不会触摸覆盖窗格(或不是您组件的子元素的任何其他元素).

mat-select renders the overlay pane using the CDK overlay package (which I think uses a CDK portal itself). The CDK overlay package renders the mat-select's overlay pane outside of your Angular application's root component (appended to the document body). This means that, despite mat-select being inside your component's template, and despite the mat-select element being a child element of your component in the DOM, the mat-select's overlay pane is NOT a child element of your component in the DOM. This means that your component's styling will not touch the overlay pane (or any other elements which are not children of your component).

我自己遇到了这个问题.我个人认为，此行为是Angular的模拟 css范围定义功能中的错误.但是，专职团队已意识到该问题，并将其视为对其实施的可接受限制.我想我记得我曾听过一位Angular维护者的评论，说他们目前不知道以一种有效的方式解决此问题的方法(因此，我认为这永远不会改变).同样，本机阴影DOM封装仅允许组件的CSS影响组件的子组件，因此在渲染叠加层时也会引起相同的问题(我相信规范也是出于性能方面的考虑而做出此决定).

I've run into this issue before myself. Personally, I consider this behavior to be a bug in Angular's emulated css scoping functionality. However, the angular team is aware of the issue and views it as an acceptable limitation of their implementation. I think I remember seeing a comment from one of the Angular maintainers that they currently don't know of a way of fixing this issue in a performant manner (so I don't think this will ever change). Similarly, native shadow DOM encapsulation ONLY allows a component's CSS to affect children of a component, so this causes the same issues when rendering overlays (I believe the spec made this decision for performance reasons as well).

这就是说，有两种方法可以将css放置在组件的css文件中的css文件中，并且仍然可以使工作正常(而不是将css放置在全局" css文件中).

This all being said, there are two ways you can place the css in your component's css file css file and still make things work (instead of needed to place the css in a "global" css file).

1. 使用@Component({encapsulation: ViewEncapsulation.None})选项为组件禁用CSS作用域.这将禁用该组件的css范围，使该组件的所有css为全局".与普通的全局" css不同，在创建/销毁组件时会在DOM中添加或删除组件的css(因此，如果组件存在，则组件的css将仅位于DOM中).
   • 如果选择此选项，您仍然可以通过使用组件的元素选择器来手动将单个样式限定到组件.

1. Disable css scoping for the component using the @Component({encapsulation: ViewEncapsulation.None}) option. This disables css scoping for the component making all of the component's css "global". Unlike normal "global" css, a component's css is added and removed from the DOM as a component is created / destroyed (so the component's css will only be in the DOM if the component is).
   • If choosing this option, you can still manually scope individual styles to the component by using the component's element selector.

将组件的css范围设置为ViewEncapsulation.Emulated(这是默认设置)，然后使用

Set a component's css scoping to ViewEncapsulation.Emulated (which is the default) and use the angular custom ::ng-deep pseudo selector to selectively remove scoping from certain css styles in the component's css file.

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

• ::ng-deep选择器在角度上已弃用，但是角度小组目前尚无删除选择器的计划，他们仍然建议您暂时使用它(如果需要).
• ViewEncapsulation.Native和ViewEncapsulation.ShadowDom不支持::ng-deep选择器(并且不支持任何穿孔选择器).

• The ::ng-deep selector is deprecated in angular, but the angular team has no current plans to remove the selector and they still recommend you use it, if needed, for the time being.
• ViewEncapsulation.Native and ViewEncapsulation.ShadowDom don't support the ::ng-deep selector (and don't have any support for piercing selectors).

这篇关于在模态对话框中显示垫选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！