So verwenden Sie Zähler in JS

Dieses Mal werde ich Ihnen die Verwendung von Zählern in JS vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Zählern in JS?

Die Lernkosten von Angular2+ dürften die höchsten unter den drei Hauptframeworks sein. Tutorials und Fälle sind rar und der Prozess ist komplizierter. Hier verwende ich zwei Fälle der Zähler- und Online-Erfassung von Benutzerdaten und deren Rendering Liste, um Ihnen schnell zu helfen, Angular2+ zu erhalten.

Bevor Sie beginnen, hoffe ich, dass Sie rxjs und Typoskript beherrschen, sonst fällt es Ihnen möglicherweise schwer, einige der Schreibmethoden zu verstehen.

Bevor Sie beginnen, müssen Sie @ngrx/store und @ngrx/effects installieren

Garn hinzufügen @ngrx/store @ngrx/effects

Die ngrx/effects- und ngrx/store-Versionen, die in diesem Tutorial verwendet werden, sind beide 5.2.0.

Lassen Sie uns zunächst kurz über den Entwicklungsprozess sprechen:

Starten -> Schreiben Aktion -> und Konfigurieren Sie das entsprechende Modul -> Schreiben Sie Effekte und konfigurieren Sie sie in das entsprechende Modul -> Komponentenbindungsdatenmodell -> >

Beenden wir zunächst den Gegenkasten. Da es in diesem Fall keine asynchronen Aufgaben gibt, können

Dienste und Effekte weggelassen werden.

Die Schritte vom

Erstellen des Projekts bis zum Starten der ersten Seite werden hier nicht besprochen. Beachten Sie, dass der -Stil scss erfordert. Verwenden Sie auch nicht cnpm, um das Paket zu installieren. Verwenden Sie stattdessen Garn oder NPM, damit später weniger Fehler auftreten.

ng new your-project --style scss

Schritt 1: Schreiben Sie das Datenmodell (

app/models/num.ts)

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

Schritt 2: Schreiben Sie

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}

Schritt 3: Schreiben Sie

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

Vergessen Sie nicht,

Reducer (app/app.module.ts)

Teil 4: Komponenten erstellen

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

ng g Component Model-Num

Schritt 5: Komponentenbindungsdatenmodell (Schritt 6 gemeinsam abschließen)

Komponente

HTML-Datei:

Komponente

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

ts-Datei:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website

import {Component, OnInit} from '@angular/core';
import {Num} from '../models/num';
import {Store} from '@ngrx/store';
import {NumActionType} from '../actions/num';

und anderen

@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() {
  }
}

verwandten Artikeln !

Empfohlene Lektüre:

JavaScript-optimiertes DOM

Vues berechnete Eigenschaften

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Zähler in JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!