What is the best practice, having a common vs @Input data service with multiple components?

Question

If I transfer the service to my main.ts, I can access it anywhere without having to call a new provider in my child components. In this service, I have variables that change.

Would it be better to send these variables to each child component, grandson component, .. etc, or just call a service in my component to get these variables when I need them?

Answer 1

The @Input API is used with the parent-child-grandchild script . If you have routing and related components , the @Input API will not help you everywhere. You need to manage the parent and child if you want two-way communication. Later, over time, it becomes difficult to manage.

If you have routing and the parent-child-grandson / mother tongue components , you can go with the shared service . If the variables change in the service, you can update the component using the RXjs library. You must manage everything in one place and subscribe to an observable in the component where you plan to use the service.

So, I, according to me, shared service , is a good solution with the Rxjs library. You can make a singleton service by entering it in the boot function.

Answer 2

The @Input and @Output are mainly intended for sharing data from the parent and child parent elements, respectively - nested components.

When using the shared service and RxJS, non-nested components can also subscribe to the property and act accordingly upon change. The following is a simple example that generates a new value when the this.myService.update() method is called from anywhere in the application:

 // myservice.ts import { Injectable } from '@angular/core'; import { Subject } from 'rxjs/Subject'; @Injectable() export class MyService { wat$: Subject<any>; constructor() { this.wat$ = new Subject(); } update() { this.wat$.next(new Date().getTime()); } } 

Then, the component referenced by the service can subscribe and act.

 // mycomponent.ts export class MyComponent { constructor(private myService: MyService) { this.myService.wat$.subscribe((value) => { // do something with the new value }); } } 

Answer 3

If I understood the question correctly, we might also need to think about two aspects of the differences associated with these decisions.

@ Login / @ Output - Helps to make your components independent and not tied to any particular service. Assuming this is a pure component that relies entirely on the input received to create the Output; which is final, easily verifiable, very loosely related to other parts of the application; therefore, high reuse is encouraged and easily achieved.

Changing these variables - managing the public user interface is of utmost importance and probably very important for Angular 2 applications, until I understand the date. ngrx / store is Redux in Reactive world and does it well. Thus, we can keep data predicates, check and transfer data at any time by any service / container components as necessary and can be transmitted in a component chain.