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

Question

所以这是我的主要组件，其中包含 header、边栏和内容

<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 组件。我想使用 app-header 组件切换 md-sidenav。我使用 @Output 和 EventEmitter 但它不起作用。相信我，我竭尽全力处理这些东西，我也使用服务方法。

//这是shared.service

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

}

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

PS 我是 angular 2

的新手

Answer 1

您的 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.

的组件中没有变量

Answer 2

试试这个解决方案很适合我，而且很简单

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>

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

Toggle md-sidenav to a different component

components

toggle

angular2-template

angular-material2

angular

mediator.service.ts

header.component.ts

header.component.html

home.component.ts

home.component.html