当 Angular Google Maps 处于全屏模式时，Angular Material Select (mat-select) 不显示

Question

我正在使用 Angular Material 和 Angular Google Maps。我在 Snazzy-Info-Window 中有一个 Angular Material 表单，它在正常模式下工作正常。它很好地显示了 mat-select，但是当我单击全屏按钮时，mat-select 中的 mat-options 不显示。一旦我退出全屏模式，我就会看到选项面板。

这是一个错误还是我错过了什么。如果我使用本机选择而不是 mat-select，则会显示下拉选项。

正常模式

全屏模式

在谷歌地图的全屏模式下，mat-select 不显示面板，但当我检查它时它就在那里。

Answer 1

Angular 材质团队有一个支持全屏模式的覆盖容器。

在您的根模块的 @NgModule 定义中，可能在 app.module.ts 文件中，执行以下操作：

import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
    ...
    providers: [
        {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
    ],
    ...
})

现在所有使用覆盖容器的材质组件都将在全屏模式下工作。

Answer 2

这个问题是由设计重叠引起的，试试这个

最重要的是不要忘记将其放在styles.scss （在根文件夹中）

.cdk-overlay-container {
  z-index: 1050 !important;
}

或者

.cdk-overlay-container {
  z-index: 99999 !important;
}

或者

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