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的仿百度搜索框效果代码
Apr 11 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
Jun 05 Javascript
jQuery获取页面元素绝对与相对位置的方法
Jun 10 Javascript
JavaScript是如何实现继承的(六种方式)
Mar 31 Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 Javascript
原生js实现商品筛选功能
Oct 28 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
微信小程序swiper实现文字纵向轮播提示效果
Jan 21 Javascript
帮你提高开发效率的JavaScript20个技巧
Jun 18 Javascript
JavaScript实现队列结构过程
Dec 06 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 数组入门教程小结
2009/05/20 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
php实现图片缩放功能类
2013/12/18 PHP
PHP json_decode函数详细解析
2014/02/17 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
Laravel 自动生成验证的实例讲解:login / logout
2019/10/14 PHP
基于Jquery的标签智能验证实现代码
2010/12/27 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
JavaScript中的document.referrer在各种浏览器测试结果
2014/07/18 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
认识Knockout及如何使用Knockout绑定上下文
2015/12/25 Javascript
解决微信小程序防止无法回到主页的问题
2018/09/28 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
[55:03]LGD vs EG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Python处理PDF及生成多层PDF实例代码
2017/04/24 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
windows下搭建python scrapy爬虫框架步骤
2018/12/23 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
什么是会话Bean
2015/05/14 面试题
大学生表扬信范文
2014/01/09 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
厉行勤俭节约倡议书
2014/05/16 职场文书
地球一小时宣传标语
2014/06/24 职场文书
公司演讲稿开场白
2014/08/25 职场文书
食品质检员岗位职责
2015/04/08 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
写自招自荐信的绝招!
2019/04/19 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript