Angular 2 Passing Wert zwischen den Komponenten

Question

Ich habe 4 Komponenten auf meiner Angular 2 App. Komponenten sind Kopfzeile, Fußzeile, Navigation und Inhalt. Ich habe eine Schaltfläche in der Header-Komponente und ich möchte den Inhalt in der Navigationskomponente ein-/ausblenden, wenn Benutzer auf die Schaltfläche aus der Header-Komponente klicken. Ich möchte wissen, dass, wenn ich auf den Knopf von der Kopfzeile klicke, wie man den Wert von der Überschriftkomponente zur Navigationskomponente übergibt. Alle Komponenten haben ihre eigenen HTML-Vorlagen. Lass mich wissen, wie man den Toggle-Wert von der Kopfzeile zur Navigationskomponente übergibt.

Dank

Answer 1

Sie können die Vorteile von sharedservice nehmen und sharedobject wie unten gezeigt.

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; 
    } 
}