Maison > Article > interface Web > Comment utiliser les compteurs en JS
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, lesservices et effets peuvent être omis.
Les étapes depuis lacré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Étape 1 : Écrire le modèle de données (
app/models/num.ts)
export class Num { count: number; constructor(num: number) { this.count = num; } }É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}É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; } };N'oubliez pas de configurer le
réducteur (app/app.module.ts)
Partie 4 : Créer des composantsimports: [ BrowserModule, RouterModule.forRoot(routes), StoreModule.forRoot({ modelNum}), //配置redurcer ],
ng g composant model-num
Étape 5 : Modèle de données de liaison de composant (terminez l'étape 6 ensemble)
Componentfichier html :
e388a4556c0f65e1904146cc1a846bee 76f625d29d91ff4c359a75491cf07c39 e388a4556c0f65e1904146cc1a846bee{{num.count}}94b3e26ee717c64999d7867364b1b4a3 1a1811f9091ca6cacbc217ee2d376c6d 076402276aae5dbec7f672f8f4e5cc81 0403914373b426d6655839ccdad6ceb9to list demo5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3Component
fichier ts :
import {Component, OnInit} from '@angular/core'; import {Num} from '../models/num'; import {Store} from '@ngrx/store'; import {NumActionType} from '../actions/num';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: '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() { } }et aux autres
articles connexes. ! Lecture recommandée :
DOM optimisé pour JavaScriptPropriétés calculées de VueCe 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!