今回はJSでのカウンターの使い方についてお届けします。JSでカウンターを使用する際の注意点を紹介します。
angular2+ の学習コストは 3 つの主要なフレームワークの中で最も高く、チュートリアルとケースが少なく、プロセスが比較的複雑です。ここでは、誰もが役立つようにカウンターとユーザー データのオンライン取得とリストへのレンダリングの 2 つのケースを使用します。すぐに angular2+ を始めましょう。
始める前に、rxjs と typescript をマスターしていただければ、いくつかの記述方法を理解するのが難しいかもしれません。
始める前に、@ngrx/store と @ngrx/Effects をインストールする必要があります
yarn add @ngrx/store @ngrx/Effects
この中で使用されている ngrx/Effects と ngrx/store のバージョンチュートリアルはどちらも 5.2.0 です。
まず、開発プロセスについて簡単に説明します。
-> データ モデルを作成します -> アクション を作成します -> 対応する モジュールに設定します -> ; エフェクトを書き込み、対応するモジュールに設定します -> コンポーネントの作成 -> コンポーネント バインディング データ モデル -> レンダリング
まず、カウンターケースを完成させましょう。この場合、非同期タスクがないため、サービスとエフェクトを省略できます。プロジェクトの作成
から最初のページの起動までの手順については、ここでは説明しません。 style では scss を使用する必要があることに注意してください。また、パッケージのインストールに cnpm を使用しないでください。代わりにyarnまたはnpmを使用して、後でエラーが発生する可能性を低くします。 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 ],
コンポーネント
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>
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() { } }
JavaScript の DOM 最適化
以上がJSでカウンターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。