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 相关文章推荐
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
很不错的两款Bootstrap Icon图标选择组件
Jan 28 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
学习Vue组件实例
Apr 28 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
JavaScript实现刮刮乐效果
Nov 01 Javascript
一道JS算法面试题——冒泡、选择排序
Apr 21 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 5.5 新特性
2013/07/02 PHP
PHP使用正则表达式清除超链接文本
2013/11/12 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
javascript中解析四则运算表达式的算法和示例
2014/08/11 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
2014/09/03 Javascript
Javascript函数的参数
2015/07/16 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
JavaScript中的E-mail 地址格式验证
2018/03/28 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JavaScript实现留言板案例
2020/03/17 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
2020/10/18 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
Python制作爬虫采集小说
2015/10/25 Python
Python实现获取磁盘剩余空间的2种方法
2017/06/07 Python
为什么选择python编程语言入门黑客攻防 给你几个理由!
2018/02/02 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
关于前端上传文件全面基础扫盲贴(入门)
2019/08/01 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
加拿大最大的书店:Indigo
2017/01/01 全球购物
50道外企软件测试面试题
2014/08/18 面试题
《美丽的公鸡》教学反思
2014/02/25 职场文书
区级文明单位申报材料
2014/05/15 职场文书
文艺晚会策划方案
2014/06/11 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
家装电话营销开场白
2015/05/29 职场文书
单身证明范本
2015/06/15 职场文书
Apache Calcite 实现方言转换的代码
2021/04/24 Servers
flex弹性布局详解
2022/03/20 HTML / CSS