Angular5中狀態管理的實現

來源：懂視網責編：小采時間：2020-11-27 22:08:41

Angular5中狀態管理的實現

Angular5中狀態管理的實現:前面學習了vue，react 都有狀態管理，如vue中的vuex是全局狀態管理，在任何組件里都可以引用狀態管理中的數據，同樣，react中的redux和mbox也是，但遇到angular5卻不知道了。一年前使用過angular1.x做過項目，那時全局狀態可以使用$rootscope，也

推薦度：

點擊下載本文 文檔為doc格式

導讀Angular5中狀態管理的實現:前面學習了vue，react 都有狀態管理，如vue中的vuex是全局狀態管理，在任何組件里都可以引用狀態管理中的數據，同樣，react中的redux和mbox也是，但遇到angular5卻不知道了。一年前使用過angular1.x做過項目，那時全局狀態可以使用$rootscope，也

前面學習了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了。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Angular5中狀態管理的實現

推薦度：

點擊下載本文 文檔為doc格式

標簽：中的狀態實現

熱門焦點

Angular5中狀態管理的實現

Angular5中狀態管理的實現

Angular5中狀態管理的實現

最新推薦

猜你喜歡

熱門推薦