Angular Material 2- Sidenav如何从服务中打开/关闭sidenav

npm install @angular/material @angular/cdk

import { Component, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { SidenavService } from 'your-sidenav-service-path';

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SidenavService {
  private isOpenSubject = new BehaviorSubject<boolean>(false);
  isOpen$ = this.isOpenSubject.asObservable();

  constructor() { }

  toggleSidenav() {
    this.isOpenSubject.next(!this.isOpenSubject.value);
  }
}

export class YourComponent implements OnInit {
  constructor(private sidenavService: SidenavService) { }

  ngOnInit() { }

  toggleSidenav() {
    this.sidenavService.toggleSidenav();
  }
}

export class SidenavComponent implements OnInit {
  isOpen = false;

  constructor(private sidenavService: SidenavService) { }

  ngOnInit() {
    this.sidenavService.isOpen$.subscribe(isOpen => {
      this.isOpen = isOpen;
    });
  }
}

<mat-sidenav-container>
  <mat-sidenav [opened]="isOpen">
    <!-- Sidenav内容 -->
  </mat-sidenav>
  <mat-sidenav-content>
    <!-- 主要内容 -->
  </mat-sidenav-content>
</mat-sidenav-container>