当Angular Google Maps在全屏模式下时，不显示Angular Material Select(垫选择) [英] Angular Material Select (mat-select) not showing when Angular Google Maps in full screen mode

问题描述

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

I am using Angular Material and Angular Google Maps. I have a Angular Material form in the Snazzy-Info-Window which works fine in normal mode. It displays the mat-select nicely but when I click the fullscreen button the mat-options in the mat-select don't show up. As soon as I come out of the full screen mode, I see the options panel.

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

Is this a bug or am I missing something. The dropdown options show up if I use the native select but not mat-select.

正常模式

NORMAL MODE

全屏模式

FULLSCREEN MODE

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

When in Fullscreen mode of google maps mat-select doesn't show panel but it is there when I inspect it.

推荐答案

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

The Angular material team has an overlay container which supports full screen mode.

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

In your root module's @NgModule definition, probably in the app.module.ts file, do this:

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

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

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

Now all material components which use an overlay container will work in full screen mode.

这篇关于当Angular Google Maps在全屏模式下时，不显示Angular Material Select(垫选择)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！