如何解决角材料:垫子抽屉容器没有显示多个垫子抽屉的背景
我正在尝试使用多个 [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 组件旨在向全屏应用添加侧边内容。 抽屉组件旨在向应用的一小部分添加侧边内容。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。