Angular 如何在组件中切换角度材质sidenav

如何在组件中调用角度材质sidenav动作？我有一个用例，sidenav只能在触发

callMethods（）

method时打开/关闭。我不能简单地在

callMethods（）

中传递

open（e）

（必需1个arugument）。有没有办法做到这一点

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

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

---

注意：我注意到有一个但不清楚的

打开和关闭角度材料侧导航的干净方法通过组件上的[opened]参数。您可以向其传递一个布尔值，可以对其进行操作以打开/关闭侧导航

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

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

1） 在组件中导入viewChild

从'@angular/core'导入{ViewChild}

2） 在组件的构造函数之前获取sidenav的引用

@ViewChild('sidenav') sidenav;

3） 开自法

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

没有太多代码细节，我直接在component.ts中编写了一个自定义方法

为了避免未定义的问题，我首先声明了
isShowing=false
，以便在页面构建时自动隐藏它，但这取决于您

在component.ts中

toggle（）：布尔值{
如果（！this.isShowing）{
返回this.isShowing=true；
}
否则{
返回this.isShowing=false；
}
}

在component.html中：



这非常有效，还允许为函数toggle（）提供参数以注入数据，因此您可以根据上下文使用一些参数自定义导航内容。
为什么不将
（单击）=“open（sidenav）”
替换为
（单击）=“callMethods（sidenav）”
。您还可以定义
callMethods（e:any
）传递一个参数，该参数也传递给
this.open（e:any）
。这一点很好，但我必须在少数地方使用
open（e）
。我认为应该是
this.isShowing=！这是我的表演toggleSidenav（）
下的code>。这很好，但如果切换按钮位于2 diff组件中，则似乎会出错。可能需要为此使用服务？如果它们位于两个不同的组件中，则确实需要其他解决方案。可注入服务确实可以是其中之一，但基于事件的结构也可以是优雅的。但是，此示例显示了最基本的简单示例：）