在不影响自动完成的情况下动态定位 Angular Material 13 mat-select 下拉列表

【问题标题】：Dynamically position Angular Material 13 mat-select dropdown without affecting autocomplete在不影响自动完成的情况下动态定位 Angular Material 13 mat-select 下拉列表
【发布时间】：2022-12-22 12:07:11
【问题描述】：

很多人似乎都有这个问题，但我还没有找到不会在其他领域造成问题的解决方案。

How to customize mat-select dropdown position?

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  z-index: 1000;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
  margin-top: 30px;
}

这个很好用。 ...除了它还会影响 mat-autocompletes，而且不是很好。它完美地排列了 mat-select 选项，并将 mat-autocomplete 选项向下移动了 30px。不好。

所以我想，也许以某种方式将 css 隔离到 mat-select。没有 mat-select 独有的父类，所以任何 :child 都不起作用。那里是一个直接的子类虽然称为 mat-select-panel-wrap 。所以我寻找一种通过这个独特的孩子访问父母的方法。 :has 是我发现的唯一声称可以这样做的东西，但是，浏览器支持为零。

https://caniuse.com/css-has

回到 11 和更早的时候，Angular Material 有一个很棒的 overlayDir: CdkConnectedOverlay; ，它允许更改选项框的位置。但他们贬值了它，然后让它受到保护，而没有解决最初让人们使用它的问题。他们的“解决方案”是“尝试我们的实验垫选择”。该解决方案充其量是可疑的。

MatSelect overlayDir now private when updating from Angular 11 to 12. How do I access it now?

我的问题是，有谁知道将上述 css 隔离到 mat-selects 的方法吗？或者更具体地说，只是垫选择选项框。

【解决方案1】：

很快，将提供程序添加到您的组件中，如下所示：
不要忘记导入 MAT_SELECT_CONFIG 你会发现这个 customClass⭐ 与 .cdk-overlay-pane 类现在您可以专门针对您的 mat_select 组件

奖金提示：尝试在检查时使用表情符号查找类名

import { MAT_SELECT_CONFIG } from '@angular/material/select';

@Component({
  selector: 'app-seller-home',
  templateUrl: './seller-home.component.html',
  styleUrls: ['./seller-home.component.css'],
  providers: [
    {
      provide: MAT_SELECT_CONFIG,
      useValue: { overlayPanelClass: 'customClass⭐' }
    }
  ],
})

【讨论】：

分享于2022年12月29日 angular angular-material mat-select 问答