如何通過組件傳遞變量Angular 2

Question

我有我的header component有一個功能，可以在點擊時切換一個類，這完全適用於頭部組件，但我想將該行爲傳遞給我的nav component，它根據這個事件。

我的問題：

我如何可以訪問內部nav component這些變量？

期望的行爲：

我要的是能夠添加CSS clases當我點擊toggleMenu

代碼：

標題組件：

import { Component, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-header', 
    templateUrl: './header.component.html', 
    styleUrls: ['./header.component.scss'] 
}) 

export class HeaderComponent implements OnInit { 

    private showOpened : boolean; 

    constructor() { 

    } 

    ngOnInit() { 
    this.showOpened = false; 
    } 


    toggleMenu() { 
    this.showOpened = !this.showOpened;; 
    } 
} 

標題HTML：

<div class="header-container"> 
    <header class="wrapper clearfix"> 
    <h1 class="logo">---</h1> 
    <input type="checkbox" class="checkbox-menu" id="menu-toogle"> 
    <label for="menu-toogle" class="menu-toogle" (click)="toggleMenu()"></label> 
    <div class="bar" [class.animate]="showOpened"></div> 
    <span class="icon-search"></span> 
    </header> 
</div> 

導航組件

import { Component, Input, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'] 
}) 

export class NavComponent implements OnInit { 
    constructor() { } 

    ngOnInit() { 
    } 

} 

導航HTML

<nav [class.open-menu]="showOpened"></nav> 

Answer 1

嘗試此代碼： 部首HTML

<div class="header-container"> 
    <header class="wrapper clearfix"> 
    <h1 class="logo">---</h1> 
    <input type="checkbox" class="checkbox-menu" id="menu-toogle"> 
    <label for="menu-toogle" class="menu-toogle" (click)="toggleMenu()"></label> 
    <div class="bar" [class.animate]="showOpened"></div> 
    <span class="icon-search"></span> 
    </header> 
    <app-nav [showOpened]="showOpened"></app-nav> <!-- put this code where you want to place your nav --> 
</div> 

導航組件

import { Component, Input, OnInit } from '@angular/core'; 

@Component({ 
    selector: 'app-nav', 
    templateUrl: './nav.component.html', 
    styleUrls: ['./nav.component.scss'] 
}) 

export class NavComponent implements OnInit { 

    @Input() showOpened: boolean; 
    constructor() { } 

    ngOnInit() { 
    } 

} 

導航HTML

<nav [class.open-menu]="showOpened"></nav> <!-- Now you can access showOpened value from parent header --> 

您可以找到有關角文檔組件交互的更多信息： https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-child

Answer 2

最好的辦法是通過服務來實現組件通信，因爲側面菜單和頁眉或工作區域是獨立的或兄弟組件

訪問以下角2網站並實施服務 https://angular.io/docs/ts/latest/cookbook/component-communication.html