Angular 角度6-如何使用按钮从另一个组件切换sidenav 切换侧导航_Angular_Angular Material_Angular6

Angular 角度6-如何使用按钮从另一个组件切换sidenav 切换侧导航

angular angular-material angular6

Angular 角度6-如何使用按钮从另一个组件切换sidenav 切换侧导航,angular,angular-material,angular6,Angular,Angular Material,Angular6,以上代码是一个组件中的按钮抽屉内容此代码希望位于另一个组件中我该怎么做请使用我的代码并解释它如果您的组件不是直接相关的（例如路由），也许您可以使用服务共享抽屉实例的服务 <mat-drawer #sideNav mode="push" opened="false" position="end" class="navsize _md-sidenav-backdrop"> Drawer content </mat-drawer> 构成垫子抽屉的组件 @Inj

以上代码是一个组件中的按钮


抽屉内容

此代码希望位于另一个组件中

我该怎么做请使用我的代码并解释它

如果您的组件不是直接相关的（例如路由），也许您可以使用服务

共享抽屉实例的服务

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

构成垫子抽屉的组件

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

我希望它能帮助您

如果您的组件不是直接相关的（例如路由），也许您可以使用服务

共享抽屉实例的服务

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

构成垫子抽屉的组件

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

我希望它能帮助您从所需的另一个组件切换sidenav：

属性装饰器@ViewChild

实现此功能的服务

例如，假设有一个header组件管理所有的header，还有几个sidenav组件，每个header一个

因此，在：

标题

header.component.html

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

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

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

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

sidenav

在sidenav.service.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组件，每个标题对应一个组件：

在sidenav1.component.html中：

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

在app.component.html中

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

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

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

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


默认内容

要从所需的其他组件切换sidenav，请执行以下操作：