Question

如何在组件中调用有角材料侧向动作？我有一个用例，仅当callMethods()方法触发时，sidenav才能打开/关闭。我也不能简单地在open(e)中传递callMethods()（必需的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] 参数。您可以向其传递一个布尔值，您可以对其进行操作以打开/关闭侧面导航。

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() {
   isShowing = !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（）提供参数以注入数据，因此您可以使用一些取决于上下文的参数来自定义导航内容。

如何在组件中

3 个答案: