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

Question

我试图了解如何使用Observables/Services/Models在Angular 2中的组件之间传递数据,并在发生更改后让组件自行更新.我不知道如何将它们联系在一起或者最佳做法是什么.

以下是我处理CRUD操作的方案.

目标:

• 使用RESTful API(带Observables)

• 来自子/兄弟/父组件的问题(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:PUT)

  更新:组件B.

组件F.

• 删除选定的车辆(REST API:DELETE)

  更新:组件B +(在一定程度上更新)组件C,因为没有更多选定的车辆

---

我已经看过/阅读/观看了Observables/Service/Components/Models上的教程,但它们都是简单的父/子或单个组件示例.我所追求的是如何通过不同的分支和兄弟叶子传递数据.如何从树的一端触发组件叶片在完全独立的组件分支/叶子上触发更新.

我要么:

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

• 一个有人愿意创建的用于覆盖上述场景中所有CRUD操作的插件

• 关于如何实现上述目标的理论(虽然,我想说我理解它背后的理论,但我在实践中遇到了麻烦)

Answer 1

Observables 只是您可以订阅新数据并向订阅者发出新数据的对象。

Observables 不参与什么可以与什么进行通信。这就是 Angular DI 和服务的用途。您可以使用服务与一组特定的组件共享可观察量。

Angular 创建了一个类似于组件和指令树的注入器层次结构。每个注入器都有一组提供程序（在组件或指令装饰器中使用的组件注册的服务providers: [...]（或 bootstrap(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);
  }

  ...
}

@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可能对您的用例感兴趣，这使得集中管理所有更新变得更容易。