Угловое 2 проходящее значение между компонентами

Question

У меня есть 4 компонента на моем приложении Angular 2. Компоненты - это заголовок, нижний колонтитул, навигация и контент. У меня есть кнопка в компоненте заголовка, и я хочу показать/скрыть контент в компоненте навигации, когда пользователь нажимает на кнопку из компонента заголовка. Я хочу знать, что когда я нажимаю кнопку из заголовка, как передать значение 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; 
    } 
}