组件之间的角度2传递值

Question

我的Angular 2应用程序有4个组件。组件是标题，页脚，导航和内容。我在头部组件中有一个按钮，当用户单击头部组件中的按钮时，我想要显示/隐藏导航组件中的内容。我想知道，当我单击标题中的按钮时，如何将Boolean值从标头组件传递到导航组件。所有组件都有自己的html模板。让我知道什么是将切换值从标题传递给导航组件的方式。

感谢

Answer 1

您可以采取的sharedservice和sharedobject优势，如下图所示。

working demo

sharedService.ts

export interface ImyInterface { 
    show:boolean; 
} 

@Injectable() 
export class sharedService { 
    showhide:ImyInterface={show:true}; 

    hide(){ 
     this.showhide.show=!this.showhide.show; 
    } 
} 

header.ts（content.ts）

import {Component,Injectable} from 'angular2/core'; 
import {sharedService} from 'src/sharedService'; 

@Component({ 
    selector: 'thecontent', 
    template: ` 
    <div>Header Component <button (click)=showhide()>show/hide</button></div> 
    ` 
}) 
export class TheContent { 
    constructor(private ss: sharedService) { 
    console.log("content started"); 
    } 
    showhide() { 
    this.ss.hide(); 
    } 
} 

个

navigation.ts（nav.ts）

import {Component,bind} from 'angular2/core'; 
import {sharedService} from 'src/sharedService'; 

@Component({ 
    selector: 'navbar', 
    template: ` 
    <style> 
    .bk{ 
      background-color:black; 
      color:white; 
    } 
    </style> 
    <div>Navigation Component </div> 
    <div [class.bk]="true" *ngIf="showHide.show"> Showing </div> 
    <hr> 
    <hr> 
    ` 
}) 
export class Navbar { 
    showHide:ImyInterface; 
    constructor(ss: sharedService) { 
    this.showHide=ss.showhide; 
    } 
}