前面學習了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); }}