Sharing components in Angular 2 with Typescript

Question

I am currently working on an Angular 2 project with Typescript.

I have several components that have the same behavior: they all can show the bootloader (depending on whether they retrieve some data), an error screen (if the failure fails), and they all subscribe to the same service (the one that retrieves data). This service updates data every 30 seconds, and component subscribers do almost the same with new data.

I could not find a good way to share this behavior.

I tried using mixins from typescript, but firstly, I cannot override the method declared in mixin in my component, and secondly, I still have to declare methods in my components without anything inside, so my compiler does not complain.

I also tried using a decorator, but my compiler complains because it does not find the method declared in the decorator.

Finally, I am trying to use typescript inheritance with a parent component that does not have a template, it is just a parent class, I use it with the ParentComponent extension and put all my logic in the ParentComponent. This last method was the simplest, but I have a strong feeling that this is definitely not the best way (composition over inheritance, etc.).

Is there any way to do this right? I come from rubies on rails, something like “problems” in a ruby ​​would be great.

Answer 1

Create a ParentComponent that contains the router-exit to save the unique behavior as (ChildComponents) and share the data model using the shared service.

Also enable lazyloading (route using loadchildren) to share the module.