将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使用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我是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>

Answer 2

您的md-sidenav应与md-sidenav-container位于同一组件中。您可以在其中加载组件。

<md-sidenav-container>

  <md-sidenav #sidenav>
    <app-navigation></app-navigation>
  </md-sidenav>

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


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

</md-sidenav-container>

请注意#sidenav语法。这是一个模板变量，因此我们可以在(navToggle)事件的标记中访问它。您最初所做的事情（app-navigation.toggle()）无法正常工作，因为名为app-navigation的组件中没有变量。