Angular 2架构 – 如何在复杂的组件树结构中传递数据元素

可观察者不参与可与之沟通的内容.这就是Angular DI和服务的用途.您可以使用服务与一组特定组件共享可观察对象.

Angular创建了一个类似于组件和指令树的注入器层次结构.每个注入器都有一组提供者(使用提供者在组件中注册的服务：[…]组件或指令装饰器(或引导程序(AppComponent,[…],它是根组件注入器的父级) ).

DI为每个提供者维护一个服务(或其他可注入)的单个实例.如果组件依赖于服务,DI将开始在需要它的组件中查找提供程序.如果它找不到它,它继续搜索父注射器,直到它找到一个或直到它到达根注射器.

这允许您指定服务的范围.如果您在bootstrap()或根组件中提供它,则此服务的范围是整个应用程序.如果您在另一个组件上提供它,则范围是此组件及其子组件.

如果要在特定组件之间进行通信,则在公共父级提供共享服务,并将其(将其添加到构造函数参数列表中)注入到应该相互通信的组件中.
您可以看到这样的共享服务作为服务总线.

事件的使用者订阅此共享服务中可用的可观察对象,发件人使用observable向订阅者发送数据.

@Injectable() 
class VehicleService {
  verhicles = new Subject();

  createVehicle(newVehicle) {
    return http.post(...)... // persist new vehicle
    this.vehicles.emit(newVehicle);
  } 

  updateVehicle(modifiedVehicle) {
    return http.post(...)... // persist modified vehicle
    this.vehicles.emit(modifiedVehicle);
  }

  ...
}

@Component({
  selector: 'my-app',providers: [VehicleService],// provide globally
...})
export class AppComponent {}

@Component({
  selector: 'b-cmp',...})
export class ComponentB {
  constructor(private vehicleService:VehicleService) {
    vehicleService.vehicles.subscribe(data => {
      // do something with new data
    });
  }
}

@Component({
  selector: 'd-cmp',...})
export class ComponentD {
  constructor(private vehicleService:VehicleService) {}

  persisteNew(vehicle) {
    this.vehicleService.createVehicle(vehicle);
  }
}

@Component({
  selector: 'c-cmp',...})
export class ComponentC {
  constructor(private vehicleService:VehicleService) {}

  saveVehicle(vehicle) {
    this.vehicleService.updateVehicle(vehicle);
  }
}

这只是展示了非常基础,但完整的功能将是一个广泛的SO答案.

https://github.com/ngrx/store可能对您的用例很有用,这使得集中管理所有更新变得更加容易.