Angular5中状态管理的实现
前面学习了vue，react都有状态管理，如vue中的vuex是全局状态管理，在任何组件里都可以引用状态管理中的数据，同样，react中的redux和mbox也是，但遇到angular5却不知道了。
一年前使用过angular1.x做过项目，那时全局状态可以使用$rootscope，也可以使用服务Service实现，下面就用Service方式在angular5中实现下吧
先定义状态管理对象，需要存什么数据，自己定义
exportclassUserInfo{
publicuserInfo:boolean;
constructor(){
this.userInfo=true;//设置全局的控制导航是否显示
}
}
然后定义Service，如下
import{Injectable}from'@angular/core';
import{Headers,Http}from'@angular/http';
import{UserInfo}from'./user-info.model';
@Injectable()//注入服务
exportclassListsService{
privateuserInfo;
constructor(privatehttp:Http){
this.userInfo=newUserInfo();
}
//设置路由显示的状态
setUserInfo(v){
this.userInfo.userInfo=v;
}
//获取路由显示的状态
getUserInfo(){
returnthis.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]
})
exportclassAppModule{}
然后就可以在component中使用了
@Component({
selector:'app-root',
template:`
特价展示
列表展示
在详情页中通过改变状态来改变页面
@Component({
selector:'app-detail',
template:`
详情页{{id}}
返回
`,
})
exportclassDetailComponent{
privateuserInfo;
constructor(
privateroute:ActivatedRoute,
privatelocation:Location,
privatelistsService:ListsService
){
this.userInfo=this.listsService.setUserInfo(false);
}
goBack():void{
this.location.back();
}
//组件销毁时执行
ngOnDestroy():void{
this.userInfo=this.listsService.setUserInfo(true);
}
}
好了，这样就ok了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。