Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser les compteurs en JS

php中世界最好的语言
Libérer: 2018-03-19 16:27:01
original
3086 Les gens l'ont consulté

Cette fois, je vais vous présenter l'utilisation des compteurs en JS. Quelles sont les précautions lors de l'utilisation des compteurs en JS. Voici des cas pratiques, jetons un oeil.

Le coût d'apprentissage d'angular2+ devrait être le plus élevé parmi les trois principaux frameworks. Les tutoriels et les cas sont rares et le processus est plus compliqué. Ici, j'utilise deux cas de compteur et d'acquisition en ligne de données utilisateur et de rendu dans un. liste pour vous aider à obtenir rapidement angulaire2+.

Avant de commencer, j'espère que vous pourrez maîtriser rxjs et dactylographié, sinon vous pourriez avoir du mal à comprendre certaines méthodes d'écriture.

Avant de commencer, vous devez installer @ngrx/store et @ngrx/effects

yarn add @ngrx/store @ngrx/effects

Les versions ngrx/effects et ngrx/store utilisées dans ce tutoriel sont toutes deux 5.2.0.

Parlons d'abord brièvement du processus de développement :

Démarrer -> Écrire le modèle de données-> Écrire action -> et Configurer le module correspondant -> Écrire les services -> Écrire les effets et les configurer dans le module correspondant -> Créer un modèle de données de liaison de composant -> >

Finissons d'abord le contre-cas. Puisqu'il n'y a pas de tâches asynchrones dans ce cas, les

services et effets peuvent être omis.

Les étapes depuis la

création du projet jusqu'au lancement de la page initiale ne seront pas abordées ici. Notez que le style nécessite scss. N'utilisez pas non plus cnpm pour installer le package. Utilisez plutôt fil ou npm, afin que les erreurs soient moins susceptibles de se produire plus tard.

ng new your-project --style scss
Copier après la connexion
Étape 1 : Écrire le modèle de données (

app/models/num.ts)

export class Num {
  count: number;
 
  constructor(num: number) {    this.count = num;
  }
}
Copier après la connexion
Étape 2 : Écrire

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}
Copier après la connexion
Étape 3 : Écrire

réducteurs (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;
  }
};
Copier après la connexion
N'oubliez pas de configurer le

réducteur (app/app.module.ts)

Partie 4 : Créer des composants
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    StoreModule.forRoot({ modelNum}),      //配置redurcer
  ],
Copier après la connexion

ng g composant model-num

Étape 5 : Modèle de données de liaison de composant (terminez l'étape 6 ensemble)

Component

fichier 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>
Copier après la connexion
Component

fichier ts :

import {Component, OnInit} from '@angular/core';
import {Num} from '../models/num';
import {Store} from '@ngrx/store';
import {NumActionType} from '../actions/num';
Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention au site Web php chinois
@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() {
  }
}
Copier après la connexion
et aux autres

articles connexes. ! Lecture recommandée :

DOM optimisé pour JavaScript


Propriétés calculées de Vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal