角2 + 2材質工具欄嵌套Sidenav - 我怎麼稱呼切換按鈕Sidenav

Question

外面有SidenavComponent和ToolbarComponent嵌套

我想打電話給SidenavComponent外sidenav.toggle（）內ToolbarComponent

sidenav .component.html

<md-sidenav-container fullscreen> 
    <md-sidenav #sidenav mode="side" color="primary"> 
    <md-toolbar color="primary"><span>Sidenav</span></md-toolbar> 
     <button md-button class="sidenav-link" (click)="sidenav.close()">HOME</button> 
     </md-sidenav> 

     <app-toolbar></app-toolbar> 

    </md-sidenav-container> 

sidenav.component.ts

import {Component, OnInit, ViewChild} from '@angular/core'; 
@Component({ 
    selector: 'app-sidenav', 
    templateUrl: './sidenav.component.html', 
    styleUrls: ['./sidenav.component.css'] 
}) 
export class SidenavComponent implements OnInit { 

    constructor() { } 

    ngOnInit() { 
    } 

} 

toolbar.component.html

<md-toolbar color="primary"> 
    <button md-button class="toolbar-menu-button" 
      (click)="sidenav.toggle()" (click)="isCollapsed = !isCollapsed"> 
    <md-icon [@iconChange]="isCollapsed">menu</md-icon> 
    </button> 
    <span class="toolbar-spacer"></span> 
    <button md-button class="toolbar-link" >HOME</button> 
    <span class="toolbar-spacer"></span> 
</md-toolbar> 

toolbar.component.ts

import {Component, Input, OnInit, ViewChild} from '@angular/core'; 
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 
import {SidenavComponent} from '../sidenav/sidenav.component'; 

@Component({ 
    selector: 'app-toolbar', 
    templateUrl: './toolbar.component.html', 
    styleUrls: ['./toolbar.component.css'], 
    animations: [ 
    trigger('iconChange', [ 
     state('true', 
     style({ transform: 'rotate(-90deg)' }) 
    ), 
     state('false', 
     style({ transform: 'rotate(0deg)' }) 
    ), 
     transition('* => *', animate('.25s')) 
    ]) 
    ] 
}) 
export class ToolbarComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { 
    } 

} 

我如何調用工具欄sidenav.toggle（）？

Answer 1

將參考#sidenav作爲Input傳遞給您的app-toolbar組件。

toolbar.component.ts：

export class ToolbarComponent implements OnInit { 

    @Input() sidenav; 

} 

sidenav.component.html：

<app-toolbar [sidenav]="sidenav"></app-toolbar> 

Plunker demo

另外，我建議改變

(click)="sidenav.toggle()" (click)="isCollapsed = !isCollapsed" 

到

(click)="sidenav.toggle(); isCollapsed = !isCollapsed" 

你不需要有一個單獨的click事件每個