JSでカウンターを使用する方法

今回は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

ステップ 1: データ モデルを作成する (

app/models/num.ts)

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

ステップ 2: アクションを作成する (app/actions/num.ts)

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

ステップ 3: reducers を作成する(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
  ],

パート 4: コンポーネントを作成するng g コンポーネント モデル番号

第 5 ステップ: コンポーネント バインディング データ モデル (6 番目のステップを一緒に完了します)

コンポーネント

html ファイル:

e388a4556c0f65e1904146cc1a846bee
  76f625d29d91ff4c359a75491cf07c39
  e388a4556c0f65e1904146cc1a846bee{{num.count}}94b3e26ee717c64999d7867364b1b4a3
  1a1811f9091ca6cacbc217ee2d376c6d
  076402276aae5dbec7f672f8f4e5cc81
  0403914373b426d6655839ccdad6ceb9to list demo5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3

コンポーネント 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(&#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 中国語ウェブサイトその他の関連記事をご覧ください。

推奨書籍:

JavaScript の DOM 最適化

Vue の計算プロパティ

以上がJSでカウンターを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。