JS里計數(shù)器的使用

ng new your-project --style scss

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

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

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;
 }
};

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

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

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({ //調(diào)用dispatch觸發(fā)添加redurces
 type: NumActionType.Add
 });
 }
 ngOnInit() {
 }
}