前面學(xué)習(xí)了vue，react 都有狀態(tài)管理，如vue中的vuex是全局狀態(tài)管理，在任何組件里都可以引用狀態(tài)管理中的數(shù)據(jù)，同樣，react中的redux和mbox也是，但遇到angular5卻不知道了。
一年前使用過angular1.x做過項目，那時全局狀態(tài)可以使用$rootscope，也可以使用服務(wù)Service實現(xiàn)，下面就用Service方式在angular5中實現(xiàn)下吧
先定義狀態(tài)管理對象，需要存什么數(shù)據(jù)，自己定義
export class UserInfo { public userInfo: boolean; constructor(){ this.userInfo = true; //設(shè)置全局的控制導(dǎo)航是否顯示 }}然后定義Service，如下
import { Injectable} from '@angular/core';import { Headers, Http } from '@angular/http';import { UserInfo } from './user-info.model';@Injectable() //注入服務(wù)export class ListsService{ private userInfo; constructor(private http: Http) { this.userInfo = new UserInfo(); } //設(shè)置路由顯示的狀態(tài) setUserInfo(v) { this.userInfo.userInfo = v; } //獲取路由顯示的狀態(tài) getUserInfo() { return this.userInfo; }}配置了service一定要在ngmodule中導(dǎo)入，這樣才能在此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(); }}在詳情頁中通過改變狀態(tài)來改變頁面
@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(); } //組件銷毀時執(zhí)行 ngOnDestroy():void{ this.userInfo= this.listsService.setUserInfo(true); }}好了，這樣就ok了。以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
