如何在angular 2中的两个组件之间共享变量值

// 共享数据的服务
import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
  private sharedValue: string;

  getSharedValue(): string {
    return this.sharedValue;
  }

  setSharedValue(value: string): void {
    this.sharedValue = value;
  }
}

// 组件A
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'component-a',
  template: `
    <input [(ngModel)]="sharedValue" (ngModelChange)="updateSharedValue()" />
  `
})
export class ComponentA {
  sharedValue: string;

  constructor(private dataService: DataService) {
    this.sharedValue = dataService.getSharedValue();
  }

  updateSharedValue(): void {
    this.dataService.setSharedValue(this.sharedValue);
  }
}

// 组件B
import { Component } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'component-b',
  template: `
    <p>{{ sharedValue }}</p>
  `
})
export class ComponentB {
  sharedValue: string;

  constructor(private dataService: DataService) {
    this.sharedValue = dataService.getSharedValue();
  }
}

// 组件A
import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'component-a',
  template: `
    <input [(ngModel)]="sharedValue" (ngModelChange)="updateSharedValue()" />
  `
})
export class ComponentA {
  @Input() sharedValue: string;
  @Output() sharedValueChange = new EventEmitter<string>();

  updateSharedValue(): void {
    this.sharedValueChange.emit(this.sharedValue);
  }
}

// 组件B
import { Component, Input } from '@angular/core';

@Component({
  selector: 'component-b',
  template: `
    <p>{{ sharedValue }}</p>
  `
})
export class ComponentB {
  @Input() sharedValue: string;
}

<component-a [(sharedValue)]="sharedValue"></component-a>
<component-b [sharedValue]="sharedValue"></component-b>