Angular5中状态管理的实现

前端之家收集整理的这篇文章主要介绍了Angular5中状态管理的实现前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

显示 } }

然后定义Service,如下

@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 { 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中使用了

`,styles:[` .lists a{ padding:0 10px; } .active{ color: #f60; } `] }) export class AppComponent { private userInfo; constructor(private listsService: ListsService) { this.userInfo= this.listsService.getUserInfo(); } }

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

详情页{{id}}

`,})
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);
}
}

好了,这样就ok了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章