angular - 将 md-sidenav 切换到不同的组件

Question

这是我的主要组件，其中包含标题、侧边栏和内容

<md-sidenav-container>

  <app-navigation></app-navigation>
  <app-header></app-header>


  <div class="app-content app-content-layout">
    <router-outlet></router-outlet>
  </div>

</md-sidenav-container>

应用程序标题仅包含一个基本的 md-toolbar View ，其中包含一个用于切换侧边栏的按钮

<md-toolbar>
  <button class="app-icon-button-toggle" (click)="navToggle()">
    <i class="material-icons app-toolbar-menu">menu</i>
  </button>
<md-toolbar>

这是应用程序 header 的逻辑或组件

export class HeaderComponent implements OnInit {

  @Output() toggleSideNav = new EventEmitter<boolean>();
  navToggle() {
    this.toggleSideNav.emit(true);
  }
}

然后我尝试这个

<app-navigation></app-navigation>
<app-header (navToggle)="app-navigation.toggle()"></app-header>

当然它不起作用，因为它很愚蠢，但我不知道该怎么办。这是我遵循的引用。 https://github.com/angular/material2/issues/2936

所以基本上，md-sidenav 位于app-navigation 组件。我想使用 app-header 组件切换 md-sidenav 。我使用 @Output 和 EventEmitter 但它不起作用。相信我，我已经尽一切努力来处理这些东西，我也使用服务方法。

//这是共享服务

@Injectable()
export class SharedService{
    public sidenav: any;

}

//这是使用 Service 方法进行组件交互的应用程序 header 。

template: '<button class="app-icon-button-toggle" (click)="toggleNav()">
               <i class="material-icons app-toolbar-menu">menu</i>
           </button>';

export class HeaderComponent {
  constructor(private SharedService: SharedService) {

  }
  toggleNav() {
    this.SharedService.sidenav.toggle();
  }
}

每次我点击 HeaderComponent 上的切换按钮时 提示错误 toggle is undefined 所以我放弃了 Service 方法。我使用了大量的引用资料，但我唯一关注的就是这个。 https://github.com/angular/material2/issues/2936 。我做了一切，但没有运气，请帮助我。谢谢

PS 我是 Angular 2 的新手

Answer 1

尝试这个解决方案对我来说很有效并且很简单

mediator.service.ts

import { Injectable, EventEmitter } from '@angular/core';

@Injectable()
export class MediatorService {

  // SideNav: Boolean = true;
  sideNav: any = false;
  sideNavUpdated = new EventEmitter();

  constructor() {

  }

  getSideNavState() {
    return this.sideNavUpdated;
  }

  setSideNavState (state) {
    this.sideNav = state;
    this.sideNavUpdated.emit(this.sideNav);
  }

}

header.component.ts

import { Component, OnInit } from '@angular/core';
import { MediatorService } from '../../../Services/mediator.service';



@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  sideNav: Boolean;

  constructor(
    private mediator: MediatorService
  ) { }

  ngOnInit() {
  }

  setSideNavState() {
    this.sideNav = !this.sideNav;
    this.mediator.setSideNavState(this.sideNav);
  }

}

header.component.html

<md-toolbar color="primary" class="toolbar">
  <span>
     <button md-icon-button (click)="setSideNavState()">
       <md-icon  class="color-white" style="vertical-align: middle;">menu</md-icon>
     </button>
  </span>
</md-toolbar>

home.component.ts

import { Component, OnInit } from '@angular/core';
import { MediatorService } from '../../Services/mediator.service';



@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  sidenavState: any = false;

  constructor(
     private mediator: MediatorService
  ) { }

  ngOnInit() {

    this.sidenavState = this.mediator.getSideNavState();
    console.log(this.sidenavState);

  }

}

home.component.html

 <md-sidenav-container style="margin-top: 5px;">

   <md-sidenav mode="side" opened="{{sidenavState | async }}">

      <h1>Works</h1>

    </md-sidenav>

    <p>Yepppppppp</p>

 </md-sidenav-container>