Angular Material:如何从组件中的方法内部而不是从html关闭MatSidenav

Question

使用Angular+Angular Material 12

如果你想关闭MatSidenav，那么我找到的几乎每个解决方案都会说：html组件中的(click)="sidenav.close()"。

但我需要(点击(我的注销功能(click)="onLogoutSideNav()"

onLogoutSideNav() {
this.authService.logout();
}

我需要从组件中的方法内部而不是从html中关闭MatSidenav。我能找到的唯一解决方案是：

sidenav!: MatSidenav
...
onLogoutSideNav() {
this.authService.logout();
this.sidenav.close();
}

但这样做会返回未定义的this.idenav.

使用@ViewChild有很多解决方案，但我还没有将导航拆分为标题和侧边栏组件。我保持简单，在应用程序组件中这样做。

<mat-list-item *ngIf="isAuth" routerLink="/"><button mat-icon-button><mat-icon>logout</mat-icon><span class="sidenav-span" (click)="onLogoutSideNav()">Logout</span></button></mat-list-item>

我在这里错过了什么？

Answer 1

您可以在点击事件中调用多个函数。例如=>

(click)="onLogoutSideNav();test()"

希望这能回答你的问题。