Angular5中状态管理的实现
程序员文章站
2023-11-28 09:28:28
前面学习了vue,react 都有状态管理,如vue中的vuex是全局状态管理,在任何组件里都可以引用状态管理中的数据,同样,react中的redux和mbox也是,但遇到...
前面学习了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 class="lists" *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); } }
好了,这样就ok了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。