当 Angular Google Maps 处于全屏模式时，Angular Material Select（mat-select）不显示答案

【问题标题】：Angular Material Select (mat-select) not showing when Angular Google Maps in full screen mode当 Angular Google Maps 处于全屏模式时，Angular Material Select（mat-select）不显示
【发布时间】：2019-03-09 22:12:52
【问题描述】：

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

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

正常模式

全屏模式

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

【问题讨论】：

发布您的示例代码！

标签： angular-material angular-google-maps

【解决方案1】：

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

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

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

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

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

【讨论】：

这为我解决了。（我正在使用带有 screenfull.js 的 Angular 11）

【解决方案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;
  }

【讨论】：

我将它添加到文件开头的 style.scss 但没有运气。一旦地图进入全屏模式，下拉菜单就会消失。