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