角材料：垫子抽屉容器没有显示多个垫子抽屉的背景

问题描述

我正在尝试使用多个 [hasBackdrop]=true 在我的 mat-drawer-container 上实现 mat-drawers。我的 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: 任何 |当其中一个sidenavs打开时抽屉容器是否应该有背景。如果明确设置为 true，则侧边模式下的抽屉也将启用背景。

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

提前致谢。

ps：英语不好，抱歉

解决方法

同一位置不能有多个抽屉 默认位置是开始，你可以在 position="end" 中设置另一个抽屉，就是这样。

在你的情况下，side-nav、side-contact、side-info应该放在同一个抽屉里，你必须实现一些逻辑（或路由）来决定在抽屉中显示什么

PS：你应该考虑使用 sidenav 而不是 drawer

来自文档：

sidenav 组件旨在向全屏应用添加侧边内容。 抽屉组件旨在向应用的一小部分添加侧边内容。