Angular2 -更改另一个组件中的组件值

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {
  private dataSubject = new BehaviorSubject<string>('Initial value');
  public data$ = this.dataSubject.asObservable();

  public updateData(newValue: string): void {
    this.dataSubject.next(newValue);
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-component-a',
  template: `
    <h1>Component A</h1>
    <p>Data: {{ data }}</p>
    <button (click)="changeData()">Change Data</button>
  `,
})
export class ComponentAComponent {
  public data: string;

  constructor(private sharedService: SharedService) {
    this.sharedService.data$.subscribe((value) => {
      this.data = value;
    });
  }

  public changeData(): void {
    this.sharedService.updateData('New value from Component A');
  }
}

import { Component } from '@angular/core';
import { SharedService } from './shared.service';

@Component({
  selector: 'app-component-b',
  template: `
    <h1>Component B</h1>
    <p>Data: {{ data }}</p>
    <button (click)="changeData()">Change Data</button>
  `,
})
export class ComponentBComponent {
  public data: string;

  constructor(private sharedService: SharedService) {
    this.sharedService.data$.subscribe((value) => {
      this.data = value;
    });
  }

  public changeData(): void {
    this.sharedService.updateData('New value from Component B');
  }
}