页面加载时，垫边导航处于打开状态.如何关闭它?

Question

页面加载时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>

另外，我希望它靠近(打开时(，当我单击页面中的任意位置时。目前，只有当我单击菜单按钮时，它才会关闭。

Answer 1

试试下面的话，

<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>

Answer 2

你可以试试它对我很好

<mat-nav-list>
<a mat-list-item [routerLink] = "['/brands']" (click)="drawer.close()"> Brands </a>
<a mat-list-item [routerLink] = "['/variants']" (click)="drawer.close()"> Variants </a>
</mat-nav-list>