0

[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: 任意 | 当其中一个侧导航打开时，抽屉容器是否应该有背景。如果显式设置为 true，则在侧面模式下也将为抽屉启用背景。

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

提前致谢。

ps：英语不好，抱歉

4

1 回答 1

2

默认情况下，您不能在同一位置有多个抽屉，位置是 start，您可以在 position="end" 中设置另一个抽屉，仅此而已。

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

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

来自文档：

sidenav 组件旨在向全屏应用程序添加辅助内容。抽屉组件旨在将附加内容添加到应用程序的一小部分。

于 2021-03-09T13:25:40.227 回答