コンポーネント間の角度2の値渡し

Question

私の角度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; 
    } 
}