成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Angular5中狀態(tài)管理

OBKoro1 / 3255人閱讀

摘要：前面學(xué)習(xí)了，都有狀態(tài)管理，如中的是全局狀態(tài)管理，在任何組件里都可以引用狀態(tài)管理中的數(shù)據(jù)，同樣，中的和也是，但遇到卻不知道了。

前面學(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: `
  
  `,
  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: `
    

      詳情頁{{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();
  }
  //組件銷毀時執(zhí)行
  ngOnDestroy():void{
    this.userInfo= this.listsService.setUserInfo(true);
  }
}

好了，這樣就ok了。
若有疑問，請加群交流：654979292

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97267.html

相關(guān)文章

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

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

    Olivia 評論0 收藏0

  • angular5 Reactive Form動態(tài)表單

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

    MorePainMoreGain 評論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 評論0 收藏0

  • Angular5 整合富文本編輯器TinyMCE（漢化+上傳）

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

    zeyu 評論0 收藏0

  • 前端人員必須知道的三個問題

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

    zollero 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<