Any drawbacks in sharing service class's member variables across components in Angular2?

hailong

In order to sync the data among difference components, I'm using a single service object, and some members variables of the service are assigned to the components local variables in the their ngOnInit callback.

With this approach, and changes to the data can be refreshed on the component view automatically, no need some kind of event subscription techniques.

But I'm not sure if it is the right way for components to interact, or would there be any problem in the future. Would someone please provide comments?

Mike Hill

This is a valid way to share properties. Services in Angular are simply singletons within their given provider scope. However, I would say that this is does not closely match a canonical way to share properties for two main reasons:

  1. The component values can be changed without the changes being reflected in the service
  2. Change detection will not be processed if the value reference within the service changes
    • As a side note on this, change detection will also not be processed on object mutation if the more efficient ChangeDetectionStrategy.OnPush strategy is used

Using Observable objects in the service could help mitigate both of these issues. For example, using BehaviorSubject objects would allow components to change the value provided by the service (via BehaviorSubject.prototype.next(value)) and to subscribe to the service-proivded value to efficiently perform change detection (done simply through the async pipe when in a template). BehaviorSubject objects also conveniently have the getValue() function to synchronously get the existing property value if needed.

That being said, using Observable fields does have an additional cost and its benefit depends on your situation. I suggest sticking with the KISS principle and keep what you have until you'd actually benefit from doing anything more complex.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

sharing the service across the whole components in Angular

Sharing a JavaScript class across multiple React components

Python: sharing class variables across threads

Angular 2 share websocket service across components

Any drawbacks to leaving the selector of routed components in place?

Angular sharing data to Components using service fails

Angular sharing the instance of a service between two components

sharing constant variables between multiple components in Angular

React sharing method across components

Exposing union's variables as class member variables

Data-sharing attribute of class member variables in OpenMP

Any Drawbacks of Sharing the Gradle User Home with Many Developers?

Sharing variables across nested folders

ruby - Sharing a class across modules

Are there any drawbacks when I declare variables inside an IF body?

Sharing data between components using service is not working (Angular)

Angular 6 sharing data between components using Service

React - best practices on sharing functions across components

Vuex - Efficiently sharing an Array across components

React newbie: sharing state across unlinked components

Sharing View Components across several projects

Sharing common CSS across VueJS components

Reactjs + redux : Sharing reducers across different components

Subscribe multiple Angular2 components to a Service

Sass variables in Angular2 components

Angular 5: Service to share data between Components (across Modules)?

angular2 sharing data between components , getters and setters

Sharing an observable between components / multicast an observable in Angular2

Angular2 Sharing variable or Global variable between pages/Components