JS里計數器的使用

來源：懂視網責編：小采時間：2020-11-27 19:58:59

JS里計數器的使用

JS里計數器的使用:這次給大家帶來JS里計數器的使用，使用JS里計數器的注意事項有哪些，下面就是實戰案例，一起來看一下。angular2+ 的學習成本應該是三大框架中最高的一個，教程及案例稀缺，流程較為復雜，這里我用計數器和在線獲取用戶數據并渲染成列表這兩個案例來幫大家快速

推薦度：

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

導讀JS里計數器的使用:這次給大家帶來JS里計數器的使用，使用JS里計數器的注意事項有哪些，下面就是實戰案例，一起來看一下。angular2+ 的學習成本應該是三大框架中最高的一個，教程及案例稀缺，流程較為復雜，這里我用計數器和在線獲取用戶數據并渲染成列表這兩個案例來幫大家快速

這次給大家帶來JS里計數器的使用，使用JS里計數器的注意事項有哪些，下面就是實戰案例，一起來看一下。

angular2+ 的學習成本應該是三大框架中最高的一個，教程及案例稀缺，流程較為復雜，這里我用計數器和在線獲取用戶數據并渲染成列表這兩個案例來幫大家快速入手angular2+。

在開始之前，希望你能先掌握rxjs以及typescript，否則對其中的一些寫法可能會覺得難以理解。

在開始之前，需要先安裝@ngrx/store和@ngrx/effects

yarn add @ngrx/store @ngrx/effects

本教程使用的 ngrx/effects和ngrx/store版本均為5.2.0。

先來大致說一下開發流程：

開始 -> 編寫數據模型 -> 編寫action -> 編寫redurces并配置到相應module -> 編寫services -> 編寫effects并配置到相應module -> 創建組件 -> 組件綁定數據模型 -> 渲染

我們先完成計數器案例。此案例由于沒有異步任務，所以可以省略掉services和effects。

從創建項目到啟動初始頁面之間的步驟這里就不講了。注意style要使用scss。還有不要使用cnpm安裝包。改用yarn或者npm，這樣后期使用不容易報錯。

ng new your-project --style scss

第一步：編寫數據模型（app/models/num.ts）

export class Num {
 count: number;
 
 constructor(num: number) { this.count = num;
 }
}

第二步：編寫action（app/actions/num.ts）

import {Action} from '@ngrx/store';
 
export enum NumActionType {
 Add = 'ADD'}
 
export class ADD implements Action {
 readonly type = NumActionType.Add; //固定寫法，必須叫type}

第三步：編寫redurcers（app/redurces/modelNum.ts）

import {Num} from '../models/num';
import {Action} from '@ngrx/store';
import {NumActionType} from '../actions/num';
 
 
export const modelNum = (state: Num = new Num(0), action: Action) => { 
 switch (action.type) { case NumActionType.Add:
 state.count++; return state; default: return state;
 }
};

不要忘記配置redurcer（app/app.module.ts）

 imports: [
 BrowserModule,
 RouterModule.forRoot(routes),
 StoreModule.forRoot({ modelNum}), //配置redurcer
 ],

第四部：創建組件

ng g component model-num

第五步：組件綁定數據模型（連帶完成第六步）

組件html文件：

<p>
 <input (click)="add()" value="+" type="button">
 <p>{{num.count}}</p>
 <input value="-" type="button">
 <br/>
 <a routerLink="/list">to list demo</a></p>

組件ts文件：

import {Component, OnInit} from '@angular/core';
import {Num} from '../models/num';
import {Store} from '@ngrx/store';
import {NumActionType} from '../actions/num';

@Component({
 selector: 'app-model-demo',
 templateUrl: './model-demo.component.html',
 styleUrls: ['./model-demo.component.scss']
})
export class ModelDemoComponent implements OnInit {
 constructor(private _store: Store<any>) {
 this._store.select('modelNum').subscribe(mNum => { //涉及到rxjs。 
 this.num = mNum;
 console.log(mNum);
 });
 }
 public num: Num;
 public add() {
 console.log('add');
 this._store.dispatch({ //調用dispatch觸發添加redurces
 type: NumActionType.Add
 });
 }
 ngOnInit() {
 }
}

相信看了本文案例你已經掌握了方法，更多精彩請關注Gxl網其它相關文章！

JS里計數器的使用

推薦度：

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

標簽：怎么用使用 js

熱門焦點

JS里計數器的使用

JS里計數器的使用

JS里計數器的使用

最新推薦

猜你喜歡

熱門推薦