我有以下代码:
<mat-card class="settings-panel">
<mat-card-title>
Settings
</mat-card-title>
<mat-card-content>
<mat-sidenav-container class="settings-container">
<mat-sidenav #sides align="end" class="settings-sidenav" mode="side">
<app-sides></app-sides>
</mat-sidenav>
<mat-sidenav #toppings align="end" class="settings-sidenav" mode="side">
<app-toppings></app-toppings>
</mat-sidenav>
<div class="settings-sidenav-content">
<button type="button" mat-button (click)="sides.open()">
Sides
</button>
<br/>
<button type="button" mat-button (click)="toppings.open()">
Toppings
</button>
</div>
</mat-sidenav-container>
</mat-card-content>
</mat-card>
它似乎可以正常工作,但 Web 控制台中出现错误:
Error: A drawer was already declared for 'position'="end"
这让我觉得我在滥用控制权,但我不知道如何继续。
最佳答案
您在同一侧声明了两次 mat-sidnav。坚持一个,或分配第二个
到另一边 align="start"
<mat-sidenav #sides align="end" class="settings-sidenav" mode="side">
<app-sides></app-sides>
</mat-sidenav>
<mat-sidenav #toppings align="start" class="settings-sidenav" mode="side">
<app-toppings></app-toppings>
</mat-sidenav>
如果您真的想在同一侧创建动态侧边导航,您可以尝试使用两个侧边导航容器或使用 ngIf
渲染或路由来修改它显示的组件
关于angular - sidenav 生成已经声明结束的抽屉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48402857/