Angular5中狀態管理

OBKoro1 發布于2019-08-23 11:39 / 3247人閱讀

摘要：前面學習了，都有狀態管理，如中的是全局狀態管理，在任何組件里都可以引用狀態管理中的數據，同樣，中的和也是，但遇到卻不知道了。

前面學習了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: `
  
      
        特價展示
        列表展示
    
    
  
  `,
  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: `
    
      詳情頁{{id}}
      
    

  `,
})
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

云服務器 GPU云服務器狀態等待中 angular5 實例維護中狀態狀態管理

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97267.html

angular1.x和angular2+并行，angular1.x 升級 angular2+方案

摘要：可以在不必打斷其它業務的前提下，升級應用程序，因為這項工作可以多人協作完成，在一段時間內逐漸鋪開，下面就方案展開說明主要依賴提供模塊。在混合式應用中，我們同時運行了兩個版本的。這意味著我們至少需要和各提供一個模塊。 angular1.x 升級 angular2+ 方案我給大家提供的是angular1.x和angular5并行，增量式升級方案，這樣大家可以循序漸進升級自己的應用，不想看...

Olivia 2019-08-26 11:36 評論0 收藏0
angular5 Reactive Form動態表單

摘要：根據最近的使用總結一下在中使用創建表單需求創建一個帶驗證的表單如果表單驗證不通過則提交按鈕自定義驗證器需求密碼需要格式為數字字母下劃線位參考自定義密碼驗證通過驗證時需要返回密碼格式為數字字母下劃線位動態創建表單需求表單增 Angular5 Reactive Form 根據最近的使用, 總結一下在ngx中使用reactive form 1. 創建表單需求: 創建一個帶驗證的表單, 如果...

MorePainMoreGain 2019-08-22 16:44 評論0 收藏0
問道Angular——Angular5/6/7項目添加熱更新(HMR)功能

摘要：提供以上熱更新功能使用初始化項目命令行進入該目錄啟動項目將附帶功能。 ??提供angular6以上HMR(熱更新)功能使用hmr-cli npm i -g hmr-cli ??初始化angular項目,命令行進入該目錄 hmr init ??npm run hmr啟動項目將附帶hmr功能。詳細配置如下： Angular6添加HMR environments目錄 environme...

Aceyclee 2019-08-23 12:17 評論0 收藏0
Angular5 整合富文本編輯器TinyMCE（漢化+上傳）

摘要：簡介是一個輕量級的富文本編輯器，相對于更加精簡，但足以滿足絕大部分場景的需要。 1. TinyMCE簡介 TinyMCE是一個輕量級的富文本編輯器，相對于CKEditor更加精簡，但足以滿足絕大部分場景的需要。 2. 安裝和配置TinyMCE 2.1 安裝TinyMCE npm install --save tinymce 2.2 設置tinymce全局訪問（.angular-...

zeyu 2019-08-22 13:50 評論0 收藏0
前端人員必須知道的三個問題

摘要：第一個問題前端都做哪些事呢，前端都需要哪些技術呢前端發展的三個階段初級階段入門常見標簽，新增的，語義化標簽等等選擇器，背景，文本，鏈接，列表，盒模型，定位，浮動，新增的屬性柵格化系統，按鈕，表單，導航數據類型，對象，函數，運算符，語句，，選第一個問題：前端都做哪些事呢，前端都需要哪些技術呢前端發展的三個階段：初級階段：（入門） html：常見標簽，html5新增的，語義化標簽等等...

zollero 2019-08-02 16:13 評論0 收藏0