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

app-header只包含一个基本的md-toolbar视图,其中包含一个用于切换侧边栏的按钮

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

这是逻辑或app-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组件.我想切换md-sidenav使用app-header组件.我用的是@Output,EventEmitter但它不起作用.相信我,我做了一切工作,我也使用服务方法.

//这是shared.service

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

}

//这是使用Service方法的app-header components interactions.

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所以我放弃了服务方法.我有大量的参考资料,但我唯一关注的是这个.https://github.com/angular/material2/issues/2936.我工作一切但没有运气,请帮助我.谢谢

PS我是角度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>