Angular5中状态管理的实现


Posted in Javascript onSeptember 03, 2018

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

Javascript 相关文章推荐
解决FireFox下[使用event很麻烦]的问题
Nov 26 Javascript
javascript数组去重方法终极总结
Jun 05 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
JavaScript基础重点(必看)
Jul 09 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
JQuery 又谈ajax局部刷新
Nov 27 jQuery
vue基础之模板和过滤器用法实例分析
Mar 12 Javascript
浅析vue插槽和作用域插槽的理解
Apr 22 Javascript
详解package.json版本号规则
Aug 01 Javascript
JS实现滑动插件
Jan 15 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 Javascript
JavaScript创建对象方法实例小结
Sep 03 #Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 #Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 #Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 #Javascript
详解vue-cli下ESlint 配置说明
Sep 03 #Javascript
解决vue的 v-for 循环中图片加载路径问题
Sep 03 #Javascript
You might like
总结对比php中的多种序列化
2016/08/28 PHP
php下载文件超时时间的设置方法
2016/10/06 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Laravel框架处理用户的请求操作详解
2019/12/20 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
JS鼠标事件大全 推荐收藏
2011/11/01 Javascript
改进版通过Json对象实现深复制的方法
2012/10/24 Javascript
js 利用image对象实现图片的预加载提高访问速度
2013/03/29 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
简介AngularJS的视图功能应用
2015/06/17 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
es6学习之解构时应该注意的点
2017/08/29 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
解决Layui中templet中a的onclick参数传递的问题
2019/09/20 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
openlayers4.6.5实现距离量测和面积量测
2020/09/25 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python数据挖掘需要学的内容
2019/06/23 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Django 创建/删除用户的示例代码
2019/07/24 Python
python 解决flask uwsgi 获取不到全局变量的问题
2019/12/22 Python
python颜色随机生成器的实例代码
2020/01/10 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
2014年仓库保管员工作总结
2014/12/03 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
浅谈移动端中的视口(viewport)的具体使用
2021/04/13 HTML / CSS