Angular Material: mat-drawer-container 不显示带有多个 mat-drawer 的背景

Question

我正在尝试在我的 mat-drawer-container 上使用多个 mat-drawers 实现 [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 可乐ps 抽屉外的卡嗒声完美配合。但是自从我添加了另外两个后，我就没有可用的背景了。

文档中说

@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

同一位置不能有多个抽屉默认位置是开始，你可以在位置=“结束”设置另一个抽屉就是这样。

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

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

来自文档：

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.

Answer 2

JiBi 就在这儿，“同一个位置不能有多个抽屉”

在 mat-drawer 或 mat-side-nav 中显示多种类型的内容或部分的最简单方法是将这些部分包装在 ng-container 中并传递该部分的上下文单击时，它可以用 *ngIf

渲染

像这样

<mat-drawer-container class="container" autosize>

  <mat-drawer #drawer class="sidenav" mode="over">
    <ng-container *ngIf="sideMenuContext === 'section-1'">
      <!-- section 1 here -->
    </ng-container>
    <ng-container *ngIf="sideMenuContext === 'section-2'">
      <!-- section 2 here -->        
    </ng-container>
  </mat-drawer>

  <div class="sidenav-content">
    <button type="button" mat-button (click)="drawer.toggle(); sideMenuContext = 'section-1'">
      section 1
    </button>
    <button type="button" mat-button (click)="drawer.toggle(); sideMenuContext = 'section-2'">
      section 2
    </button>
    <!-- main content here-->
  </div>

</mat-drawer-container>

Angular Material: mat-drawer-container 不显示带有多个 mat-drawer 的背景

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

angular

angular-material

angular-material-6

angular-material-7

mat-drawer