如何通过组件传递变量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