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

Posted 2023-02-18

【中文标题】如何在组件中切换角度材质 sidenav

【英文标题】：How to toggle angular material sidenav in component

【发布时间】：2020-03-10 03:18:11

【问题描述】：

如何在组件中调用 Angular Material Sidenav 动作？我有一个用例，sidenav 只能在callMethods() 方法触发时打开/关闭。我也不能简单地将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 但不清楚

【问题讨论】：

为什么你不替换 (click)="open(sidenav)"by (click)="callMethods(sidenav)"。您还可以定义callMethods(e: any) 传递一个参数，该参数也传递给this.open(e: any)。

好点，但我必须在少数地方使用open(e)

【参考方案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() 
   this.isShowing = !this.isShowing;


callMethods() 
    this.toggleSidenav();


 

【讨论】：

我觉得应该是this.isShowing = !this.sShowing;方法下的：toggleSidenav()。

这很好，但如果切换按钮位于 2 diff 组件中，它似乎会搞砸。可能需要为此使用服务？

如果它们位于两个不同的组件中，则确实需要其他解决方案。可注入服务确实可以是其中之一，但基于事件的结构也可以是优雅的。然而，这个例子最好地展示了基本的简单例子:)

【参考方案2】：

没有太多代码细节，我直接在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】：

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

import ViewChild from '@angular/core';

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

@ViewChild('sidenav') sidenav;

3) 从方法打开

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

【参考方案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();