Question

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

以下是我处理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

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

Observable没有参与什么可以与什么沟通。这就是Angular DI和服务的用途。您可以使用服务与特定的一组组件共享可观察对象。

Angular创建了一个类似于组件和指令树的注入器层次结构。每个注入器都有一组提供程序（在组件或指令装饰器中使用providers: [...]在组件中注册的服务（或引导程序（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可能会对您的用例感兴趣，这样可以更轻松地集中管理所有更新。

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

1 个答案: