我不知道如何将它们联系在一起或者最佳做法是什么.
以下是我处理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.
更新：组件B.
组件F.
>删除所选车辆(REST API：DELETE)
更新：组件B(在一定程度上更新)组件C,因为没有更多选定的车辆
我已经看过/阅读/观看了Observables / Service / Components / Models上的教程,但它们都是简单的父/子或单个组件示例.
我所追求的是如何通过不同的分支和兄弟叶子传递数据.如何从树的一端触发组件叶片在完全独立的组件分支/叶子上触发更新.
我要么：
>一个已经存在的教程(我已经错过了),它涵盖了上述类似场景中的所有CRUD操作
>有人愿意为上述场景中的所有CRUD操作创建的plunker
>关于如何实现上述目标的理论(虽然,我想说我理解它背后的理论,但我在实践中遇到了麻烦)
解决方法
可观察者不参与可与之沟通的内容.这就是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可能对您的用例很有用,这使得集中管理所有更新变得更加容易.
