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学习笔记之jQuery构建函数的7种方法
Jun 03 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
JavaScript中原型链存在的问题解析
Sep 25 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
React 无状态组件(Stateless Component) 与高阶组件
Aug 14 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
layui type2 通过url给iframe子页面传值的例子
Sep 06 Javascript
node.js express捕获全局异常的三种方法实例分析
Dec 27 Javascript
vue实现图片懒加载的方法分析
Feb 05 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 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截取中文字符串的问题
2006/07/12 PHP
《PHP编程最快明白》第三讲:php数组
2010/11/01 PHP
php上传文件常见问题总结
2015/02/03 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP类的封装与继承详解
2015/09/29 PHP
Extjs Ext.MessageBox.confirm 确认对话框详解
2010/04/02 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
JavaScript 设计模式 安全沙箱模式
2010/09/24 Javascript
javaScript实现浮点数转十六进制字符
2013/10/29 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
jquery map方法使用示例
2014/04/23 Javascript
AngularJS 避繁就简的路由
2016/07/01 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
Python基础学习之常见的内建函数整理
2017/09/06 Python
Python 实现在文件中的每一行添加一个逗号
2018/04/29 Python
简单了解Python3里的一些新特性
2019/07/13 Python
使用OpenCV实现仿射变换—平移功能
2019/08/29 Python
Python 批量读取文件中指定字符的实现
2020/03/06 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
使用CSS3来绘制一个月食图案
2015/07/18 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
初任培训自我鉴定
2013/10/07 职场文书
2014年会演讲稿范文
2014/01/06 职场文书
菜篮子工程实施方案
2014/03/08 职场文书
销售职业生涯规划范文
2014/03/14 职场文书
新闻发布会主持词
2014/03/28 职场文书
文化建设工作方案
2014/05/12 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
语文复习计划
2015/01/19 职场文书
合作意向协议书
2015/01/29 职场文书
小学音乐教师个人工作总结
2015/02/05 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers