[英]mat-toolbar, mat-sidenav and mat-sidenav-container is not a known element
[英]Opening mat-sidenav from a button outside of mat-sidenav-container
我尝试对 Angular Material 团队在此示例中所做的移动使用做同样的事情。
所以我创建了我的组件,如下所示:
<app-component-0></app-component-0>
<div class="d-lg-none">
<button mat-icon-button (click)="snav.toggle()">
<mat-icon>menu</mat-icon>
</button>
<mat-sidenav-container class="sidenav-container">
<mat-sidenav #snav mode="over">
<app-menu-tree>
</app-menu-tree>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<app-component-1-desktop class="d-none d-lg-flex flex-column"></app-component-1-desktop>
所以调用 sidenav 切换操作的按钮在 mat-sidenav-container 之外,就像在 stackblitz 上的例子一样......但是当我点击按钮时出现以下错误:
无法读取未定义的属性“切换”
所以按钮无法打开sidenav ...
有没有人有解决这个问题的想法?
(对不起,我的英语不是我的母语)
使用opened
输入。 API: https : //material.angular.io/components/sidenav/api
模板:
<button mat-icon-button (click)="opened = !opened">
<mat-icon>menu</mat-icon>
</button>
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="over" [(opened)]="opened">
<app-menu-tree></app-menu-tree>
</mat-sidenav>
<mat-sidenav-content>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>
记得在你的组件中定义opened
属性。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.