Angular 6 - Как переключать sidenav из другого компонента с помощью кнопки

Question

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

вышеуказанный код является кнопкой в ​​одном компоненте

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

этот код хочет быть в другом компоненте

Как я могу это сделать, пожалуйста, сделайте это с моим кодом и объясните это

Answer 1

Для переключения sidenav из другого компонента вам нужно:

1. свойство декоратора @ ViewChild.
2. сервис для выполнения этой функции.

например, допустим, у вас есть компонент заголовка, который управляет всеми заголовками, и несколько компонентов sidenav, по одному для каждого заголовка.

так в:

заголовок

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

в 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, по одному на каждый заголовок:

в 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);
  }
}

для других сиденав вы воспроизводите ту же процедуру ...

AppComponent

в 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>

Answer 2

Если ваши компоненты не связаны напрямую (например, маршруты), возможно, вы можете воспользоваться услугой.

Служба для совместного использования экземпляра ящика

@Injectable({
    providedIn: 'root'
})
export class DrawerService {
    private matDrawer: MatDrawer;

    setDrawer(drawer: MatDrawer) {
        this.matDrawer = drawer;
    }

    toggle() {
         this.matDrawer.toggle();
    }
}

Компонент, который входит в состав ящика для мата

export class WithDrawerComponent implements OnInit {
  @ViewChild(MatDrawer) matDrawer: MatDrawer;
  constructor(private drawerService: DrawerService) {

  }

  ngOnInit() {
    this.drawerService.setDrawer(this.matDrawer);
  }
}

Компонент, активирующий переключение кнопкой

export class WithButtonComponent implements OnInit {
  constructor(private drawerService: DrawerService) {
  }

  toggleDrawer() {
    this.drawerService.toggle();
  }
}

Надеюсь, это поможет вам