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 相关文章推荐
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
jquery得到iframe src属性值的方法
Sep 25 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
浅谈Javascript中的12种DOM节点类型
Aug 19 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
JavaScript数据类型和变量_动力节点Java学院整理
Jun 26 Javascript
使用PDF.js渲染canvas实现预览pdf的效果示例
Apr 17 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
也谈截取首页新闻 - 范例
2006/10/09 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
window.open()弹出居中的窗口
2007/02/01 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
jQuery验证插件validation使用指南
2015/04/21 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
js文本框输入内容智能提示效果
2015/12/02 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
2016/08/15 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
JS实现HTML页面中动态显示当前时间完整示例
2018/07/30 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
js字符串处理之绝妙的代码
2019/04/05 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
node静态服务器实现静态读取文件或文件夹
2019/12/03 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python如何用matplotlib创建三维图表
2021/01/26 Python
CSS3改变浏览器滚动条样式
2019/01/04 HTML / CSS
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
this关键字的含义
2015/04/08 面试题
Java基础知识面试题
2014/03/25 面试题
某同学的自我鉴定范文
2013/12/26 职场文书
怎样填写就业意向
2014/04/02 职场文书
冬季施工防火方案
2014/05/17 职场文书
临时租车协议范本
2014/09/23 职场文书
法定代表人证明书
2014/11/28 职场文书
田径运动会通讯稿
2015/07/18 职场文书
在Python 中将类对象序列化为JSON
2022/04/06 Python