Angular Google Maps在全屏模式下不显示Angular Material Select（垫选择）

Question

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

这是错误还是我错过了一些东西。如果我使用本机选择而不使用垫选择，则会显示下拉选项。

正常模式

全屏模式

在Google地图的全屏模式下，mat-select不会显示面板，但在我检查时会显示面板。

Answer 1

此问题是由设计重叠引起的，请尝试

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

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

OR

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

OR

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

Answer 2

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

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

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

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

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