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

Question

使用 Angular + Angular Material 12

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

但是我的注销功能需要那个（点击）(click)="onLogoutSideNav()"

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

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

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

但这样做 returns 未定义 this.sidenav。

有很多使用@ViewChild 的解决方案，但我没有将我的导航拆分为 header 和侧边栏组件。我保持简单，在 app.component.

中这样做

<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()"

希望这能回答您的问题。

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

Angular Material: How to close MatSidenav from inside a method in the component instead of from the html?

javascript

angular

angular-material

mat-sidenav