Angular5中状态管理的实现

前面学习了vue，react 都有状态管理，如vue中的vuex是全局状态管理，在任何组件里都可以引用状态管理中的数据，同样，react中的redux和mbox也是，但遇到angular5却不知道了。

一年前使用过angular1.x做过项目，那时全局状态可以使用$rootscope，也可以使用服务Service实现，下面就用Service方式在angular5中实现下吧

先定义状态管理对象，需要存什么数据，自己定义

export class UserInfo { public userInfo: boolean; constructor(){ this.userInfo = true; //设置全局的控制导航是否显示 } }

然后定义Service，如下

import { Injectable} from '@angular/core'; import { Headers, Http } from '@angular/http'; import { UserInfo } from './user-info.model'; @Injectable() //注入服务 export class ListsService{ private userInfo; constructor(private http: Http) { this.userInfo = new UserInfo(); } //设置路由显示的状态 setUserInfo(v) { this.userInfo.userInfo = v; } //获取路由显示的状态 getUserInfo() { return this.userInfo; } }

配置了service一定要在ngmodule中导入，这样才能在此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 './app.component'; import { AppRouterModule } from './router.module'; import { ViewComponent } from './view.component'; import { ListComponent } from './list.component'; import { OtherComponent } from './other.component'; import { DetailComponent } from './detail.component'; import { ListsService } from './app.service'; @NgModule({ declarations: [ AppComponent, DetailComponent, ViewComponent, ListComponent, OtherComponent ], imports: [ BrowserModule, FormsModule , AppRouterModule, HttpModule ], providers: [ListsService], bootstrap: [AppComponent] }) export class AppModule { }

然后就可以在component中使用了

@Component({ selector: 'app-root', template: ` <div > <div *ngIf='userInfo.userInfo'> <a routerLink="/view" routerLinkActive ="active">特价展示</a> <a routerLink="/list" routerLinkActive ="active">列表展示</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) { this.userInfo= this.listsService.getUserInfo(); } }

在详情页中通过改变状态来改变页面

@Component({ selector: 'app-detail', template: ` <div> 详情页{{id}} <button (click)="goBack()">返回</button> </div> `, }) export class DetailComponent { private userInfo; constructor( private route: ActivatedRoute, private location: Location, private listsService: ListsService ) { this.userInfo= this.listsService.setUserInfo(false); } goBack(): void { this.location.back(); } //组件销毁时执行 ngOnDestroy():void{ this.userInfo= this.listsService.setUserInfo(true); } }