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了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。