angular - mat-sidenav 在页面加载时打开。我该如何关闭它?
问题描述
mat-sidenav
页面加载时打开。我该如何关闭它?
这是我的 HTML:
<mat-sidenav
#drawer
class="sidenav" position="end"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="warn">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink] = "['/brands']"> Brands </a>
<a mat-list-item [routerLink] = "['/variants']"> Variants </a>
</mat-nav-list>
</mat-sidenav>
另外,当我单击页面中的任意位置时,我希望它关闭(打开时)。目前,只有当我单击菜单按钮时它才会关闭。
解决方案
试试下面的,
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
[mode]="(isHandset$ | async) ? 'over' : 'side'"
[opened]="!(isHandset$ | async)">
<mat-toolbar color="warn">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item [routerLink] = "['/brands']"> Brands </a>
<a mat-list-item [routerLink] = "['/variants']"> Variants </a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="isHandset$ | async">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
<span>Application Title</span>
</mat-toolbar>
</mat-sidenav-content>
</mat-sidenav-container>
推荐阅读
- c# - 如何将枚举投影到id,值匿名类型?
- javascript - Laravel / php 中的本地保存 blob 文件(来自 JS/axios)
- python - Numpy 数组点积 - “聚合”行而不评估整个事物
- python - 如何在不重复对的情况下循环列表
- python - Scipy 的 curve_fit 以矩阵或数组作为初始猜测
- oracle - Proc SQL 查询的无效数据类型错误
- angular - 在角度中使用指令 ngIf 或指令 ngFor 时显示空白页
- bash - 无法验证 shell 脚本中的字符串
- java - 是否有像“changeSelection()”这样的函数来选择行但在表格顶部而不是底部?
- java - Java Keystore - 当 varbinary 存储为 0x 时无法加载密钥库