JS에서 카운터를 사용하는 방법

이번에는 JS에서 카운터를 사용하는 방법을 알려드리겠습니다. JS에서 카운터를 사용할 때의 주의사항은 무엇인가요?

Angular2+의 학습 비용은 세 가지 주요 프레임워크 중에서 가장 높아야 합니다. 튜토리얼과 사례가 부족하고 프로세스가 복잡합니다. 여기서는 사용자 데이터를 온라인으로 수집하고 목록으로 렌더링하는 두 가지 사례를 사용합니다. Angle2+를 시작해보세요.

시작하기 전에 rxjs와 typescript를 먼저 익히시기 바랍니다. 그렇지 않으면 일부 작성 방법을 이해하기 어려울 수 있습니다.

시작하기 전에 @ngrx/store 및 @ngrx/효과를 설치해야 합니다.

yarn 추가 @ngrx/store @ngrx/효과

여기에 사용되는 ngrx/효과 및 ngrx/store 버전 튜토리얼은 둘 다 5.2.0입니다.

먼저 개발 프로세스에 대해 간략히 설명하겠습니다.

Start -> Write action -> > 효과를 작성하고 해당 모듈에 구성 -> 구성 요소 바인딩 -> 렌더링

먼저 카운터 사례를 완성해 보겠습니다. 이 경우에는 비동기 작업이 없으므로 서비스와 효과를 생략할 수 있습니다.

프로젝트 만들기

부터 초기 페이지 시작까지의 단계는 여기서 논의하지 않습니다. 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단계: 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}

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 구성 요소 모델 번호

다섯 번째 단계 : 컴포넌트 바인딩 데이터 모델 (6번째 단계를 함께 완료)

Component

html 파일:

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

Component 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 중국어 웹사이트Other관련 기사를 참조하세요!

추천 도서:

JavaScript DOM 최적화

Vue의 계산된 속성

위 내용은 JS에서 카운터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!