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

Question

如何在组件中调用有角度的物料侧导航操作？我有一个用例，即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();
}

注意：我注意到有一个帖子，但没有清除

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函数可以干净地调用toggle方法：

app.ts

isShowing: boolean;
toggleSidenav() {
this.isShowing = !this.isShowing;
}
callMethods() {
this.toggleSidenav();
}

Answer 2

在没有太多代码细节的情况下，我直接在组件.ts 中编码了一个自定义方法

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

在组件中.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 3

1(在组件中导入viewChild。

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

2( 在构建组件之前获取侧导航的参考

@ViewChild('sidenav') sidenav;

3( 从方法打开

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

Answer 4

我的方式

1. 使用@Output((

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

2. 和EventEmmiter

   export class HeaderComponent implements OnInit {
   @Output() toggleMenuEvent = new EventEmitter<void>();    
   constructor() { }
   ngOnInit(): void {
   }
   public toggleMenu() {
   this.toggleMenuEvent.emit();
   }