SoFunction
Updated on 2025-04-04

Implementation of state management in Angular5

I learned about vue before, react has state management. For example, vuex in vue is global state management, and data in state management can be referenced in any component. Similarly, redux and mbox in react are the same, but I don’t know when I encounter angular5.

I used a project a year ago. At that time, the global state can be implemented using $rootscope or service. Let's implement it in angular5 using Service method.

First define the state management object, what data you need to store, define it yourself

export class UserInfo {
 public userInfo: boolean;
 constructor(){
    = true; //Set the global control navigation display }
}

Then define the Service as follows

import { Injectable} from '@angular/core';
import { Headers, Http } from '@angular/http';
import { UserInfo } from './';

@Injectable() //Injection serviceexport class ListsService{
 private userInfo;
 constructor(private http: Http) { 
   = new UserInfo();
 }

 //Set the status of the route display setUserInfo(v) {
   = v;
 }
 //Get the route display status getUserInfo() {
  return ;
 }
}

If the service is configured, you must import it in the ngmodule so that it can be effective in this module.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  
import { HttpModule }  from '@angular/http';

import { AppComponent } from './'; 

import { AppRouterModule } from './'; 
import { ViewComponent } from './';
import { ListComponent } from './';
import { OtherComponent } from './';
import { DetailComponent } from './'; 
import { ListsService } from './';

@NgModule({
 declarations: [
  AppComponent,
  DetailComponent,
  ViewComponent,
  ListComponent,
  OtherComponent
 ],
 imports: [ 
  BrowserModule,
  FormsModule ,
  AppRouterModule,
  HttpModule
 ],
 providers: [ListsService], 
 bootstrap: [AppComponent] 
})
export class AppModule { }

Then it can be used in the component

@Component({
 selector: 'app-root',
 template: `
 <div >
   <div class="lists" *ngIf=''>
    <a routerLink="/view" routerLinkActive ="active">Special offer display</a>
    <a routerLink="/list" routerLinkActive ="active">List display</a>
  </div>
  <router-outlet></router-outlet>
 </div>
 `,
 styles:[`
 .lists a{
  padding:0 10px;
 }
 .active{
  color: #f60;
 }
 `]
})
export class AppComponent {
 private userInfo;
 constructor(private listsService: ListsService) { 
   = ();
 }
}

Change the page by changing the status in the details page

@Component({
 selector: 'app-detail',
 template: `
  <div>
   Details{{id}}
   <button (click)="goBack()">return</button>
  </div>

 `,
})
export class DetailComponent {
 private userInfo;
 constructor(
  private route: ActivatedRoute,
  private location: Location,
  private listsService: ListsService
 ) {
  = (false);
 }
 goBack(): void {
  ();
 }
 //Execute when component is destroyed ngOnDestroy():void{
  = (true);
 }
}

OK, that's OK. The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.