Angular Material在一个组件中很少有“sidenav”实例

Question

Angular Material的工作方式不明显！ :(
如何使用“材料sidenav”的几个实例??

（我的案例）

我有几个按钮，我希望每个按钮都能打开另一个侧面的吸盘。

解决方案1°

每个人都单独工作！但不幸的是，所有人都不起作用！

<mat-sidenav-container>
    <nav>
        <button mat-fab (click)="menuA.toggle()">/button>
            <button mat-fab (click)="menuB.toggle()">/button>
                <button mat-fab (click)="menuC.toggle()">/button>
    </nav>
    <aside>
        <mat-sidenav #menuA align="start" mode="over" opened="false">
            <!-- sidenav content -->
        </mat-sidenav>
        <mat-sidenav #menuB align="start" mode="over" opened="false">
            <!-- sidenav content -->
        </mat-sidenav>
        <mat-sidenav #menuC align="end" mode="over" opened="false">
            <!-- sidenav content -->
        </mat-sidenav>
    </aside>
</mat-sidenav-container>     

我想知道为什么以上解决方案不起作用！？

解决方案2°

Vicariously - 我尝试以另一种方式做到这一点。但是这种方法要求每个“sidenav”具有相同的输入参数。

根据使用的按钮，将显示各种不同的按钮 内容，（我只保留了sidenav的一个实例，但在我内部创建了新的替代角色：很多“sidenav”的孩子“div”的实例， 有多少人需要各种“sidenav”实例

但是，如果不增加额外的古怪性，我可以这样做吗？

提前感谢您的支持。

Answer 1

万岁！

我能够做到这一点！ 在这一点上，它正常工作，部分是为了回应我的期望（如何使一个在右侧打开，另一个在左侧？）

这是我的修复解决方案：

<强> My.component.html

<mat-sidenav-container>
    <nav>
        <button(click)="toggleSideNavSetIn('panelA')"> A </button>
        <button(click)="toggleSideNavSetIn('panelB')"> B </button>
        <button(click)="toggleSideNavSetIn('panelC')"> C </button>
        <button(click)="toggleSideNavSetIn('panelD')"> D </button>
        <button(click)="toggleSideNavSetIn('panelE')"> E </button>
    </nav>
    <main>
        <!-- primary content -->
    </main>
    <mat-sidenav #MyInstSideNav align="start" mode="side" opened="false"  [ngSwitch]="toggleSideNavSetOut">
        <div *ngSwitchCase="'panelA'">
            <mat-toolbar><h1>{{toggleSideNavSetOut}}</h1></mat-toolbar><div> <!-- sidenav content A --> </div>
        </div>
        <div *ngSwitchCase="'panelB'">
            <mat-toolbar><h1>{{toggleSideNavSetOut}}</h1></mat-toolbar><div> <!-- sidenav content B --> </div>
        </div>
        <div *ngSwitchCase="'panelC'">
            <mat-toolbar><h1>{{toggleSideNavSetOut}}</h1></mat-toolbar><div> <!-- sidenav content C --> </div>
        </div>
        <div *ngSwitchCase="'panelD'">
            <mat-toolbar><h1>{{toggleSideNavSetOut}}</h1></mat-toolbar><div> <!-- sidenav content D --> </div>
        </div>
        <div *ngSwitchCase="'panelE'">
            <mat-toolbar><h1>{{toggleSideNavSetOut}}</h1></mat-toolbar><div> <!-- sidenav content E --> </div>
        </div>
    </mat-sidenav>
</mat-sidenav-container>

<强> My.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ViewChild } from '@angular/core';
import { NgStyle, NgClass, NgSwitch } from '@angular/common';

@Component({
    selector: 'app-My',
    templateUrl: './My.component.html',
    styleUrls: ['./My.component.scss'],
    encapsulation: ViewEncapsulation.None,
    preserveWhitespaces: false,
})

export class MyComponent implements OnInit {
    @ViewChild('MyInstSideNav') MyInstSideNav:any;
    constructor() { }
    ngOnInit() { }
    toggleSideNavSetOut: string ="";
    toggleSideNavSetIn(toggleSideNavGet: string){
        if (this.MyInstSideNav.opened===false) {
            this.toggleSideNavSetOut = toggleSideNavGet; 
            this.MyInstSideNav.toggle();
        } else if (this.MyInstSideNav.opened===true && this.toggleSideNavSetOut != toggleSideNavGet) {
            this.toggleSideNavSetOut = toggleSideNavGet; 
        } else {
            this.MyInstSideNav.toggle();
        }
    }
}

可以用另一种方式完成吗？