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了。
若有疑问，请加群交流：654979292