如何在组件中切换角度材料侧导航

Question

如何在组件中调用角度材质侧导航操作？我有一个用例，sidenav 仅在方法触发时才能打开/关闭callMethods()。我也不能简单地传递open(e)（callMethods()需要 1 个参数）。有办法实现这个目标吗？

应用程序.html

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="mode.value">
    <p>
      some nav here
    </p>
  </mat-sidenav>

  <mat-sidenav-content>
    <p><button mat-button (click)="open(sidenav)">Toggle</button></p>
    <p>
      some text here
    </p>
  </mat-sidenav-content>
</mat-sidenav-container>

应用程序.ts

open(e: any) {
    e.toggle();
  }

  callMethods() {
    this.open(); // required 1 arguments
    this.otherMethod();
  }
anotherMethod() {
    this.open(); // required 1 arguments
    this.otherMethod();
  }

注：我注意到有一个帖子，但不清楚

Answer 1

打开和关闭角度材料侧面导航的一种很好的干净方法是通过组件上的[opened]参数。您可以向它传递一个布尔值，您可以操纵它来打开/关闭侧面导航。

应用程序.html

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav [mode]="mode.value" [opened]="isShowing">
    <p>
      some nav here
    </p>
  </mat-sidenav>

  <mat-sidenav-content>
    <p><button mat-button (click)="toggleSidenav()">Toggle</button></p>
    <p>
      some text here
    </p>
  </mat-sidenav-content>
</mat-sidenav-container>

如果按如下方式实现，您的 callMethods 函数可以干净地调用您的切换方法：

应用程序.ts

isShowing: boolean;

toggleSidenav() {
   this.isShowing = !this.isShowing;
}

callMethods() {
    this.toggleSidenav();
}