Angular Material: mat-drawer-container 不显示带有多个 mat-drawer 的背景
Angular Material: mat-drawer-container not showing backdrop with multiple mat-drawer
我正在尝试在我的 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: 英语不好,抱歉
同一位置不能有多个抽屉
默认位置是开始,你可以在位置=“结束”设置另一个抽屉就是这样。
在你的情况下,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.
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>
我正在尝试在我的 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: 英语不好,抱歉
同一位置不能有多个抽屉 默认位置是开始,你可以在位置=“结束”设置另一个抽屉就是这样。
在你的情况下,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.
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>