如何在组件中切换 angular material sidenav

Question

如何在组件中调用angular material sidenav 动作？我有一个用例，sidenav 只能在 callMethods() 方法触发时打开/关闭。我也不能简单地在 callMethods() 中传递 open(e)（需要 1 个参数）。有没有办法实现这个？

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>

app.ts

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

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

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

Answer 1

通过组件上的 [opened] 参数打开和关闭 angular material 侧边导航的一种干净利落的方式。您可以向它传递一个布尔值，您可以将其操纵到 open/close 侧边导航。

app.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 函数就可以干净地调用您的切换方法：

app.ts

isShowing: boolean;

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

callMethods() {
    this.toggleSidenav();
}

Answer 2

1) 在您的组件中导入 viewChild。

import { ViewChild } from '@angular/core';

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

@ViewChild('sidenav') sidenav;

3) 从方法打开

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

Answer 3

我的代码没有太多细节，我直接在 component.ts

中编写了一个自定义方法

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

在component.ts

toggle(): boolean{
    if (!this.isShowing){
        return this.isShowing = true;
    }
    else{
        return this.isShowing = false;
    }
}

在component.html中：

<mat-drawer [opened]="isShowing"></mat-drawer>

这非常有效，还允许为函数 toggle() 提供参数以注入数据，因此您可以根据上下文使用一些参数自定义导航内容。

Answer 4

我的方式

使用@Output()

 <mat-sidenav #sidenav ></mat-sidenav>
 <app-header (toggleMenuEvent)="sidenav.toggle()"></app-header>

和 EventEmmiter

 export class HeaderComponent implements OnInit {

 @Output() toggleMenuEvent = new EventEmitter<void>();    

 constructor() { }

 ngOnInit(): void {
 }

 public toggleMenu() {
     this.toggleMenuEvent.emit();
 }

如何在组件中切换 angular material sidenav

How to toggle angular material sidenav in component

methods

typescript

angular-material

angular

mat-sidenav