Angular 6.x about sharing status of multiple components

A novice to angular6.x, recently encountered the following questions in the process of using. Do you have any familiar gods to share your experience

  1. how multiple components share a state in angular? Flux architecture can be used in vue, etc. Official libraries such as (VUEX), how to sibling components in angular, or data sharing between parent components and grandchildren components (excluding intermediate components for forwarding) feel poor scalability and difficult to maintain. )
  2. how should service services be understood in angular? Personal feeling is very similar to mixins, in vue is a common method, import registration in the component can be used, and different components into the same service will not share data.
  3. angualr projects are bound to face multi-component sharing in medium-to large-scale projects, so what should be done in medium-and large-scale projects? Or what kind of programs do you all adopt
  4. what is the best way to deal with authentication in routing? For example, if you are not logged in, you cannot enter some pages. If you can, you would like to provide the corresponding demo
  5. .
Mar.28,2021

specific implementation details, because time constraints can not provide, simply list the direction of several solutions.

  1. the multi-component sharing state you mentioned seems to be the concept of redux, and angular also has these implementations. If you are used to redux, you can take a look at ngrx these libraries may give you the answer.
  2. in fact, there is no concept of service in the code of angular 2, just because of habit, many names are named with service. They are injectable objects or values, or they can be methods (dependency injection ), service in ide/dependency-injection-pattern" rel=" nofollow noreferrer "> Angular has its own scope, and the service registered in the module will share the instance of service with all members of the module. If one of the components registers the service, itself, then the service instance injected into the component is a new instance, similar between modules, and for more information, please refer to the previous link.
  3. same as 1
  4. Authentication is done with daemon (Guard) and supports Synchronize. Asynchronous (Promise, Observable)- reference link .

document clearly
component communication ide/component-interaction" rel=" nofollow noreferrer "> https://angular.cn/guide/comp.
route authentication ide/router-sharpmilestone-5-route-guards" rel= "nofollow noreferrer" > https://angular.cn/guide/rout.


service is a singleton, which means that there is only one object globally. So there is only one copy of the data


  1. Multi-component sharing, you can use redux-like libraries such as ngrx, or you can use service to pass. Look at the specific needs. Ngrx defines a larger amount of code such as store,entity, but once it is defined, it is more convenient to use, similar to a global database. And chrome's devtool provides support for ngrx, which can track event, visually and even provide time machine to return to the previous event.. Service is relatively easy to use and can be graded into.

2.service is the concept of dependency injection, which actually comes from the back-end language. If you understand languages like C-sharp, you can find that the concept is basically the same. After all, TypeScript is also produced by Microsoft. Vue's mixinmixin personally feels more like the concept of object-oriented inheritance.

Menu