組件之間的角度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; 
    } 
}