使用angular 2中的服务通过组件传递对象

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedObject = { name: 'Angular', version: '2' };

  getSharedObject() {
    return this.sharedObject;
  }

  updateSharedObject(newObject: any) {
    this.sharedObject = newObject;
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-component-a',
  template: `<div>{{ sharedObject | json }}</div>`
})
export class ComponentA implements OnInit {
  sharedObject;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.sharedObject = this.dataService.getSharedObject();
  }
}

@Component({
  selector: 'app-component-b',
  template: `<button (click)="changeObject()">Change Object</button>`
})
export class ComponentB {
  constructor(private dataService: DataService) {}

  changeObject() {
    const newObject = { name: 'New Angular', version: '3' };
    this.dataService.updateSharedObject(newObject);
  }
}

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

@Injectable({
  providedIn: 'root'
})
export class DataService {
  private sharedObjectSubject = new BehaviorSubject<any>({ name: 'Angular', version: '2' });
  sharedObject$ = this.sharedObjectSubject.asObservable();

  getSharedObject() {
    return this.sharedObjectSubject.getValue();
  }

  updateSharedObject(newObject: any) {
    this.sharedObjectSubject.next(newObject);
  }
}

import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'app-component-a',
  template: `<div>{{ sharedObject | json }}</div>`
})
export class ComponentA implements OnInit {
  sharedObject$: Observable<any>;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.sharedObject$ = this.dataService.sharedObject$;
  }
}