角材料:垫子抽屉容器没有显示多个垫子抽屉的背景 [英] Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer

问题描述

我正在尝试使用多个 mat-drawers 在我的 mat-drawer-container 上实现 [hasBackdrop]=true.我的 html 结构是这样的:

<mat-drawer #drawer mode="over"><app-side-nav [抽屉]=抽屉"[信息抽屉]=信息抽屉"；[contactDrawer]=contactDrawer"></app-side-nav></垫子抽屉><mat-drawer #infoDrawer mode="over"><app-side-info [infoDrawer]=infoDrawer"></app-side-info></垫子抽屉><mat-drawer #contactDrawer mode="over"opened='true'><app-side-contact [contactDrawer]=contactDrawer"></app-side-contact></垫子抽屉><mat-drawer-content><app-header [抽屉]=抽屉"></app-header><app-mensagem></app-mensagem><div><路由器插座></路由器插座>

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

只有一个抽屉，hasBackdrop 与 mat-drawer-container 外的点击完美配合，折叠抽屉.但自从我添加了另外两个后，我不再有可用的背景.

在文档中它说

<块引用>

@Input()hasBackdrop: 任何 |当其中一个 sidenavs 打开时抽屉容器是否应该有背景.如果明确设置为 true，则侧边模式下的抽屉也将启用背景.

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

提前致谢.

ps:英语不好，抱歉

解决方案

同一个位置不能有多个抽屉默认情况下，位置是开始，您可以在位置=结束"中设置另一个抽屉就是这样.

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

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

来自文档:

<块引用>

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

I'm trying to implement the [hasBackdrop]=true on my mat-drawer-container with multiple mat-drawers. My html structure is something like this:

<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>

With one single drawer the hasBackdrop works perfectly with the click outside the mat-drawer-container colapsing the drawer. But since i added the other two i no longer have the backdrop available.

In the docs it says

@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.

Anyone had a similar problem? Should i open a new issue?

Thanks in advance.

ps: bad english, sorry

解决方案

you can't have multiple drawers in the same position by default the position is start, you can set another drawer in position="end" and that's it.

in your case, side-nav, side-contact, side-info, should go in the same drawer, and you must implement some logic (or routing) to decide what to show in the drawer

PS: you should consider using sidenav instead of drawer

from the doc :

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.

这篇关于角材料:垫子抽屉容器没有显示多个垫子抽屉的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！