Angular 2体系结构-如何在复杂组件树结构中传递数据元素

我试图理解如何使用可观测/服务/模型在Angular 2中的组件之间传递数据，并在发生更改时让组件自行更新。 我不知道如何把这些联系在一起，也不知道这样做的最佳实践是什么

下面是我处理CRUD操作的一个场景

目标：

• 使用RESTful API（带可观察性）

• 来自子/同级/父组件的问题（API？）调用

• 一旦发生更改，让父/同级/子组件自动更新自身

下面是组件树的可视化视图：

                             ----------------
                             | Component A  |
                             | Vehicle View |
                             ----------------
                                /      \
                               /        \
                ----------------      ----------------
                | Component B  |      | Component C  |
                | Vehicle List |      | Vehicle Menu |
                |  REST: GET   |      |              |
                ----------------      ----------------
                /                         /       \
               /                         /         \
-------------------    ------------------------ -------------------
|   Component D   |    |      Component E     | |   Component F   |
| Add New Vehicle |    | Update Vehicle Name  | |  Delete Vehicle |
|    REST: POST   |    |        REST: PUT     | |   REST: DELETE  |
-------------------    ------------------------ -------------------

组件A

• 只封装所有其他组件

组件B

• 显示车辆列表（REST API:GET）
  更新：选择车辆时部件C->[E，F]

组件D

• 创建新的车辆对象/模型（REST API:POST）
  更新：组件B（然后触发组件B更新）

成分C

• 显示所选车辆菜单（车辆名称，删除所选车辆）
  更新：组件E、F

组件E

• 显示/编辑所选车辆名称（REST API:放置）
  更新：组件B

成分F

• 删除所选车辆（REST API:删除）
  更新：部件B+（在一定程度上更新）部件C，因为没有更多选定的车辆

---

我看过/读过/看过关于可观测/服务/组件/模型的教程，但它们都是简单的父/子或单个组件示例。 我所追求的是如何通过不同的分支和同级叶传递数据。来自树一端的组件叶如何触发对完全独立的组件分支/叶的更新

我想要的是：

• 一个已经存在的教程（我错过了），它涵盖了上述类似场景中的所有CRUD操作

• 有人愿意创建一个plunker来覆盖上述场景中的所有CRUD操作

• 关于如何实现上述目标的理论（尽管我想说我理解其背后的理论，但在实践中遇到了困难）

---

可观察的

只是可以订阅新数据并向订阅者发送新数据的对象

---

可观察的

不涉及什么可以与什么沟通。这就是Angular DI和服务的用途。您可以使用服务与一组特定的组件共享观测值

Angular创建一个类似于组件和指令树的注入器层次结构。每个注入器都有一组提供程序（使用组件或指令装饰器中的

提供程序：[……]

向组件注册的服务（或根组件注入器的父级引导程序（AppComponent）[……]）

DI为每个提供程序维护一个服务实例（或其他可注入的实例）。如果组件依赖于服务，DI开始在需要的组件上查找提供程序。如果找不到，则继续在父注入器上搜索，直到找到一个或到达根注入器

这允许您指定服务的作用域。如果在

bootstrap（）

或根组件中提供，则此服务的作用域是整个应用程序。如果在另一个组件中提供，则作用域是此组件及其子组件

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

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

@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);
  }

  ...
}

这只是显示了最基本的功能，但完整的功能将是一个非常广泛的答案

---

可能是为了便于集中管理所有更新的用例而安装的。

这基本上就是angular 1中使用的旧$resource所做的……或者让控制器中的观察者观察服务值的变化……因此，angular 2中是什么替代了它，我也感兴趣？你能详细说明一下“新主题”吗（）部分…是否有一个演示/示例如何将http调用与主题连接起来？这是一个相当复杂的主题，我自己也不太深入，因为在Dart（我每天使用的）中，这一切都有点不同。那里有很多文档。例如一些特定于Angular2的文档

@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);
  }
}