如何使用angular-material创建全屏覆盖导航

Question

我正在使用angular材质和angular5和angular flex-layout，我正在寻找一个类似的full screen overlay window angular组件，但似乎他们还没有实现一个，而且由于我更喜欢将时间花在功能上而不是附件组件上，所以我决定请你们用"angular方式“(如果你已经编码了)来分享一个关于它的例子。

Answer 1

您可以使用MatDialog并通过包含MatDialogConfig属性使其全屏显示：

width: '100vw',
height:  '100vh',
maxWidth: '100vw',
maxHeight: '100vh',
hasBackdrop: false,

参见example。

Answer 2

你可以参考这个site。

它提供了屏幕覆盖以及多种类型的微调器。此外，如果您想要关闭屏幕覆盖，请参考实现上述屏幕覆盖的stackblitz。

stackblitz llink