Angular Material : mat-drawer-container not showing backdrop with multiple mat-drawer

Question

我正在尝试在具有多个 mat-drawer 的 mat-drawer-container 上实现 [hasBackdrop]=true。我的 html 结构是这样的:

<mat-drawer-container [hasBackdrop]="true">

  <mat-drawer #drawer mode="over">
    <app-side-nav [drawer]="drawer" [infoDrawer]="infoDrawer" [contactDrawer]="contactDrawer" ></app-side-nav>
  </mat-drawer>

  <mat-drawer #infoDrawer mode="over">
    <app-side-info [infoDrawer]="infoDrawer"></app-side-info>
  </mat-drawer>

  <mat-drawer #contactDrawer mode="over"opened='true'>
    <app-side-contact [contactDrawer]="contactDrawer"></app-side-contact>
  </mat-drawer>

  <mat-drawer-content>
    <app-header [drawer]="drawer"></app-header>

    <app-mensagem></app-mensagem>

    <div>
      <router-outlet></router-outlet>
    </div>

    <app-footer></app-footer>
  </mat-drawer-content>
</mat-drawer-container>

对于一个抽屉，hasBackdrop 可以完美地与 mat-drawer-container 外部的点击一起折叠抽屉。但自从我添加了另外两个后，我不再有可用的背景。

在文档中它说

@Input() hasBackdrop: any | Whether the drawer container should have a backdrop while one of the sidenavs is open. If explicitly set to true, the backdrop will be enabled for drawers in the side mode as well.

有人遇到过类似的问题吗？我应该打开一个新问题吗？

提前致谢。

ps:英语不好，抱歉

Answer 1

同一个位置不能有多个抽屉 默认位置是start，你可以在position="end"设置另一个抽屉就可以了。

在您的情况下，侧面导航、侧面接触、侧面信息应该放在同一个抽屉中，并且您必须实现一些逻辑(或路由)来决定在抽屉中显示什么

PS:您应该考虑使用 sidenav 而不是抽屉

来自文档:

The sidenav components are designed to add side content to a fullscreen app. The drawer component is designed to add side content to a small section of your app.