欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Angular5中状态管理的实现

程序员文章站 2023-01-10 12:11:03
前面学习了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了。以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。