JS里计数器的使用-js教程-PHP中文网

JS里计数器的使用

php中世界最好的语言

发布： 2018-03-19 16:27:01

原创

3095 人浏览过

这次给大家带来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: &#39;app-model-demo&#39;,
  templateUrl: &#39;./model-demo.component.html&#39;,
  styleUrls: [&#39;./model-demo.component.scss&#39;]
})
export class ModelDemoComponent implements OnInit {
  constructor(private _store: Store<any>) {
    this._store.select(&#39;modelNum&#39;).subscribe(mNum => {    //涉及到rxjs。    
      this.num = mNum;
      console.log(mNum);
    });
  }
  public num: Num;
  public add() {
    console.log(&#39;add&#39;);
    this._store.dispatch({          //调用dispatch触发添加redurces
      type: NumActionType.Add
    });
  }
  ngOnInit() {
  }
}

登录后复制

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！