Angular5中状态管理的实现

231 阅读 0 评论 153 点赞

我是靠谱客的博主神勇小懒虫，最近开发中收集的这篇文章主要介绍Angular5中状态管理的实现，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前面学习了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了。以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。