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 相关文章推荐
用正则xmlHttp实现的偷(转)
Jan 22 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
Jun 24 Javascript
javascript模拟C#格式化字符串
Aug 26 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
Websocket协议详解及简单实例代码
Dec 12 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
JQuery animate动画应用示例
May 14 jQuery
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
浅谈Web Storage API的使用
Jun 23 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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
30个精美的jQuery幻灯片效果插件和教程
2011/08/23 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
2013/12/25 Javascript
手机端转盘抽奖代码分享
2015/09/10 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
微信小程序获取微信运动步数的实例代码
2017/07/20 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
[06:48]DOTA2-DPC中国联赛2月26日Recap集锦
2021/03/11 DOTA
python实现的生成随机迷宫算法核心代码分享(含游戏完整代码)
2014/07/11 Python
多个应用共存的Django配置方法
2018/05/30 Python
python用pandas数据加载、存储与文件格式的实例
2018/12/07 Python
python按比例随机切分数据的实现
2019/07/11 Python
关于numpy中eye和identity的区别详解
2019/11/29 Python
Python3 获取文件属性的方式(时间、大小等)
2020/03/12 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
详解用selenium来下载小姐姐图片并保存
2021/01/26 Python
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
求高于平均分的学生学号及成绩
2016/09/01 面试题
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
职专应届生求职信
2013/11/16 职场文书
个人承诺书格式
2014/06/03 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
先进个人材料怎么写
2014/12/30 职场文书
南极大冒险观后感
2015/06/05 职场文书