이번에는 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
export class Num { count: number; constructor(num: number) { this.count = num; } }
import {Action} from '@ngrx/store'; export enum NumActionType { Add = 'ADD'} export class ADD implements Action { readonly type = NumActionType.Add; //固定写法,必须叫type}
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; } };
imports: [ BrowserModule, RouterModule.forRoot(routes), StoreModule.forRoot({ modelNum}), //配置redurcer ],
Component
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>
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('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() { } }
JavaScript DOM 최적화
위 내용은 JS에서 카운터를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!