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 相关文章推荐
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
ES6概念 ymbol.for()方法
Dec 25 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
详解Webpack DLL用法以及功能
Jul 11 Javascript
浅谈Vue的响应式原理
May 30 Javascript
JavaScript表格隔行变色和Tab标签页特效示例【附jQuery版】
Jul 11 jQuery
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
JavaScript实现单点登录的示例
Sep 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
微信 开发生成带参数的二维码的实例
2016/11/23 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
密码框显示提示文字jquery示例
2013/08/29 Javascript
javascript 按键事件(兼容各浏览器)
2013/12/20 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
javascript事件委托的用法及其好处简析
2016/04/04 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
微信小程序 this.triggerEvent()的具体使用
2019/12/10 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
2020/05/31 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[55:45]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第一局
2016/02/28 DOTA
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
Python库urllib与urllib2主要区别分析
2014/07/13 Python
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
浅谈Python实现Apriori算法介绍
2017/12/20 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
Python select及selectors模块概念用法详解
2020/06/22 Python
python 实现全球IP归属地查询工具
2020/12/18 Python
小橄榄树:Le Petit Olivier
2018/04/23 全球购物
NBA欧洲商店(英国):NBA Europe Store UK
2018/07/27 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
经典商业广告词
2014/03/13 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
音乐之声音乐广播稿
2014/09/10 职场文书
机关干部三严三实心得体会
2014/10/13 职场文书
岳庙导游词
2015/02/04 职场文书
初二英语教学反思
2016/02/15 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS