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

php中世界最好的语言
リリース: 2018-03-19 16:27:01
オリジナル
3065 人が閲覧しました

今回は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を使用して、後でエラーが発生する可能性を低くします。

ステップ 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 ファイル:

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

推奨書籍:

JavaScript の DOM 最適化


Vue の計算プロパティ

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!