ng-deep 导致 Angular 中的 mat-select 出现问题

Posted 2023-03-13

【中文标题】ng-deep 导致 Angular 中的 mat-select 出现问题

【英文标题】：ng-deep causing issues with mat-select in Angular

【发布时间】：2020-08-20 02:55:00

【问题描述】：

我正在使用 angular 中的 mat-select。我在 2 个地方使用过它。

应用组件 模态组件

为了在 mat-select 中设置选项面板的样式，我使用了 ng-deep，如下所示，

在 app.component.css 中

::ng-deep .mat-select-panel 
  border-top: none !important;
  min-width: 100% !important; 
  position: absolute;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  margin-left: 17px !important;
  margin-top: -10px !important;

在将另一个模态元素添加到页面之前，它的位置是正确的。在这个模态组件中，ng-deep 也被用于在模态中设置 mat-select 的样式。 在modal.component.css

::ng-deep .mat-select-panel 
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;

所以现在当我们点击modal组件中的mat-select，然后如果我们点击app组件中的mat-select，app组件中mat-select的位置似乎在不同的位置。 谁能帮我解决这个问题。

【问题讨论】：

您是否尝试添加 div 并将您的 mat 面板放入其中并写为 .yourelement ::ng-deep

【参考方案1】：

ng-deep 已被弃用，所以你应该使用没有封装的组件，所以：

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

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

您创建的 css 类应将其与另一个类一起封装在一个 div 中，并以这种方式定义它们：

app.component.css

.custom1 .mat-select-panel 
  border-top: none !important;
  min-width: 100% !important; 
  position: absolute;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  margin-left: 17px !important;
  margin-top: -10px !important;

app.component.html

<div class="custom1">
  <!-- here mat-select whith class .mat-select-panel -->
</div>

modal.component.css

.custom2 .mat-select-panel 
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;

modal.component.html

<div class="custom2">
  <!-- here mat-select whith class .mat-select-panel -->
</div>

欲了解更多信息，请参阅：

https://angular.io/guide/component-styles#view-encapsulation

https://material.angular.io/guide/customizing-component-styles

https://material.angular.io/guide/theming#defining-a-custom-theme

【讨论】：

我在这样的 div 中添加了 mat select，但是所有样式都被破坏了

你可以在stackblitz中提供一个问题的例子

我可以通过使用面板类属性来解决这个问题

【参考方案2】：

我能够使用面板类解决此问题。

<div class="custom">
  <mat-select panelClass="select-panel"></mat-select> 
</div>

然后在styles.css中

.custom .select-panel
  min-width: calc(100% + 7px) !important;
  position: absolute;
  top: 100px;
  left: 20px;

【讨论】：

您作为解决方案为您提供的答案与我之前已经回答的答案完全相同。