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