Angular 6 - 如何使用按钮从另一个组件切换 sidenav

Question

<mat-drawer-content class="btmm md-sidenav-right">
  <button (click)="sideNav.toggle()" mat-button>Toggle SideNav</button>
</mat-drawer-content>

the above code is the button in one component

<mat-drawer #sideNav mode="push" opened="false" position="end" class="navsize _md-sidenav-backdrop">
  Drawer content
</mat-drawer>

this code want to be in another component

我该怎么做，请用我的代码来做并解释一下

Answer 1

要从您需要的另一个组件切换侧导航:

1. 属性装饰器@ViewChild。
2. 完成此功能的服务。

例如，假设您有一个管理所有 header 的 header 组件和每个 header 一个的侧导航组件。

所以在:

标题

header.component.html

<mat-toolbar color="primary" class="example-toolbar" [ngSwitch]="headerType">
  <!-- HEADER_1 -->
  <mat-toolbar-row color="warn" class="example-toolbar" *ngSwitchCase="1">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="example-app-name">HEADER 1</h1>
  </mat-toolbar-row>

  <!-- HEADER_2 -->
  <mat-toolbar-row color="warn" class="example-toolbar" *ngSwitchCase="2">
    <button mat-icon-button (click)="toggleSidenav()">
      <mat-icon>menu</mat-icon>
    </button>
    <h1 class="example-app-name">HEADER 2</h1>
  </mat-toolbar-row>

  <!-- DEFAULT HEADER -->
  <mat-toolbar-row *ngSwitchDefault>
   <h1 class="example-app-name">DEFAULT HEADER</h1>
  </mat-toolbar-row>
</mat-toolbar>

在 header.component.ts 中:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { SidenavService } from '../services/sidenav.service';
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
   headerType: number;
   toggleActive = false;

   mobileQuery: MediaQueryList;
   private _mobileQueryListener: () => void;

   constructor(private sidenav: SidenavService,
    changeDetectorRef: ChangeDetectorRef, media: MediaMatcher) {
    // to change the varible in the *ngSwitch directive
    this.newHeader(1);
    // this.newHeader(2);

    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
   }

   newHeader(headerType: number) {
     this.headerType = headerType;
   }

   toggleSidenav() {
        this.toggleActive = !this.toggleActive;
        this.sidenav.toggle();
   }
}

侧导航

在 sidenav.service.ts 中:

import { Injectable } from '@angular/core';
import { MatSidenav } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class SidenavService {

  private sidenav: MatSidenav;

  constructor() { }

  public setSidenav(sidenav: MatSidenav) {
    this.sidenav = sidenav;
  }

  public open() {
    return this.sidenav.open();
  }


  public close() {
    return this.sidenav.close();
  }

  public toggle(): void {
    this.sidenav.toggle();
  }
}

假设您有多个 sidenav 组件，每个 header 一个:

在 sidenav1.component.html 中:

<div class="example-container" [class.example-is-mobile]="mobileQuery.matches">

  <app-header></app-header>

  <mat-sidenav-container class="example-sidenav-container" [style.marginTop.px]="mobileQuery.matches ? 56 : 0">
    <mat-sidenav #snav [mode]="mobileQuery.matches ? 'over' : 'side'" [fixedInViewport]="mobileQuery.matches"
      fixedTopGap="56">
      <mat-nav-list>
        <a mat-list-item routerLink="{{nav.link}}" *ngFor="let nav of fillerNav">{{nav.name}}</a>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content>
      <router-outlet></router-outlet>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

在 sidenav1.component.ts 中:

import { MediaMatcher } from '@angular/cdk/layout';
import { Component, OnInit, OnDestroy, ChangeDetectorRef, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { SidenavService } from 'src/app/services/sidenav.service';

@Component({
  selector: 'app-sidenav1',
  templateUrl: './sidenav1.component.html',
  styleUrls: ['./sidenav1.component.scss']
})
export class Sidenav1Component implements OnInit, OnDestroy {

  sidenavList1: Array<{ name: string, link: string }> = [
    { 'name': 'My profile', 'link': 'profile' },
    { 'name': 'Settings', 'link': 'settings' },
    { 'name': 'My messages', 'link': 'messages' },
    { 'name': 'Notifications', 'link': 'notifications' }];
  mobileQuery: MediaQueryList;
  fillerNav = Array.from(this.sidenavList1);
  fillerContent = Array.from({ length: 6 }, () =>
    ` --text content-- `);
  private _mobileQueryListener: () => void;

  @ViewChild('snav') public sidenav: MatSidenav;
  constructor(changeDetectorRef: ChangeDetectorRef, media: MediaMatcher, private sidenavService: SidenavService) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }

  ngOnInit() {
    this.sidenavService.setSidenav(this.sidenav);
  }

  ngOnDestroy(): void {
    this.mobileQuery.removeListener(this._mobileQueryListener);
  }
}

对于另一侧导航，您可以重复相同的过程...

应用程序组件

在app.component.ts中:

export class AppComponent {
  title = 'my-app';
  headerType: number;
  constructor() {
    this.newHeader(1);
  }

  newHeader(headerType: string) {
    this.headerType = headerType;
  }
}

在app.component.html中

<div [ngSwitch]="headerType">
  <div *ngSwitchCase="1">
    <app-sidenav-1></app-sidenav-1>
  </div>
  <div *ngSwitchCase="2">
    <app-sidenav-2></app-sidenav-2>
  </div>
  <div *ngSwitchDefault>
    Default content
    <router-outlet></router-outlet>
  </div>
</div>