Angular 2 Architecture - How to Transfer Data Elements in a Complex Component Tree Structure

Question

I am trying to understand how to transfer data between components In Angular 2 using Observables / Services / Models and update components after change. I do not know how to tie it all together or what is best to do.

The following is a scenario that relates to CRUD operations.

Goal:

• use the RESTful API (w / Observables)

• call (API?) calls from child / child / parent components

• have parent / child components / child components automatically updated after change

Here is a visual representation of the component tree:

---------------- | 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 | ------------------- ------------------------ ------------------- 

Component A

• just encapsulates all other components

Component B

• displays a list of vehicles (REST API: GET )

  UPDATES: Component C → [E, F] when choosing a vehicle

Component D

• creates a new vehicle object / model (REST API: POST )

  UPDATES: Component B (which then launches component B updates)

Component C

• displays the selected vehicle menu (vehicle name, deletion of the selected vehicle)

  UPDATES: Component E, F

Component E

• Display / change selected vehicle name (REST API: PUT )

  UPDATES: Component B

Component F

• Deletes the selected vehicle (REST API: DELETE )

  UPDATES: Component B + (up to the update level) Component C, since there is no longer a vehicle selected

---

I saw / read / watched tutorials on Observables / Service / Components / Models, but they were all simple parent / child or separate examples. What I need is to pass data through different branches and related leaves. As a component sheet from one end of the tree, the update starts on a completely separate branch / component sheet.

I also after:

• A tutorial (which I skipped) already exists that covers all CRUD operations in the same scenario described above

• the plunker that someone wants to create to cover all CRUD operations in the above scenario

• theory of how to achieve the above (although, I want to say, I understand the theory underlying it, but I have problems with practice)

Answer 1

Observable are just objects where you can subscribe to new data and transfer new data to subscribers.

Observable do not participate in what can tell what. This requires Angular DI and services. You can use services to exchange observables with a specific set of components.

Angular creates a hierarchy of injectors that resembles your tree of components and directives. Each injector has a set of providers (services that are registered with the component using providers: [...] in the component or directive pointer (or bootstrap (AppComponent, [...] which is the parent of the root component injector).

DI supports one instance of the service (or another injection) for each provider. If the component is service dependent, DI starts looking for a provider in the component where it is needed. If he cannot find it, he continues searching on the original injector until he finds it or reaches the root injector.

This allows you to specify the service area. If you provide it in bootstrap() or the root component, the scope of this service is the entire application. If you provide it to another component, the scope is that component and its children.

If you want to establish a relationship between specific components, then provide a common service to the common parent and add it (add to the list of designer parameters) to the components that should interact with each other. You can see a common service such as a service bus.

Event users subscribe to observables available in this common service, senders use observables to transmit data to subscribers.

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

It just shows the basics, but full functionality will be the way SO's broad answer is.

https://github.com/ngrx/store can be interesting for your use case, which simplifies the centralized management of all updates.