Angular를 사용하여 변경 감지를 구현하는 방법

이 글에서는 주로 Angular의 변경 감지 방법을 소개하고 참고하겠습니다.

변경 감지는 Angular 2의 가장 중요한 기능입니다. 구성 요소의 데이터가 변경되면 Angular 2는 데이터 변경을 감지하고 해당 변경 사항을 반영하기 위해 뷰를 자동으로 새로 고칠 수 있습니다.

변경 감지를 소개하기 전에 먼저 브라우저에서의 렌더링 개념을 소개해야 합니다. 렌더링은 모델을 뷰에 매핑하는 프로세스입니다. 모델의 값은 JavaScript의 기본 데이터 유형, 객체, 배열 또는 기타 데이터 객체일 수 있습니다. 그러나 보기는 페이지의 단락, 양식, 버튼 등과 같은 다른 요소일 수 있습니다. 이러한 페이지 요소는 내부적으로 DOM(문서 개체 모델)으로 표현됩니다. 구체적인 예를 살펴보겠습니다.

<h4 id="greeting"></h4> 
<script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>

이 예는 모델이 변경되지 않고 페이지가 한 번만 렌더링되므로 매우 간단합니다. 데이터 모델이 런타임 시 계속 변경되면 전체 프로세스가 복잡해집니다. 따라서 데이터와 보기의 동기화를 보장하기 위해 페이지가 여러 번 렌더링됩니다. 다음으로 다음 질문을 고려해 보겠습니다.

1. 모델은 언제 변경되나요? 2. 모델에서 어떤 변경이 발생하나요? 3. 변경 후 업데이트해야 하는 뷰 영역은 어디에 있나요? 해당 View 영역

변경 감지의 기본 목적은 위의 문제를 해결하는 것입니다. Angular 2에서는 구성 요소의 모델이 변경되면 구성 요소의 변경 감지기가 업데이트를 감지한 다음 뷰에 새로 고침을 알립니다. 따라서 변경 감지기에는 두 가지 주요 작업이 있습니다.

1. 모델 변경 감지

2. 보기 새로 고침 알림

다음으로 변경이 무엇인지, 어떻게 발생하는지 분석해 보겠습니다.

Changes and Events

변화는 기존 모델과 새 모델의 차이입니다. 즉, 변화는 새로운 모델을 만듭니다. 다음 코드를 살펴보겠습니다.

import { Component } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
 <p>当前值：{{ counter }}</p>
 <button (click)="countUp()"> + </button>` }) export class CounterComponent {
 counter = 0;

 countUp() { this.counter++;
 }
}

페이지가 처음으로 렌더링된 후 카운터의 현재 값은 0입니다. + 버튼을 클릭하면 카운터의 카운터 값이 자동으로 1씩 증가하고 페이지의 현재 값도 업데이트됩니다. 이 예에서 click 이벤트로 인해 counter 속성 값이 변경됩니다.

다음 예를 계속 살펴보겠습니다.

import { Component, OnInit } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0;
 ngOnInit() {
  setInterval(() => { this.counter++;
  }, 1000);
 }
}

이 구성 요소는 setInterval 타이머를 사용하여 매초마다 자동으로 카운터 값을 1씩 증가시킵니다. 이 경우 속성 값이 변경된 것은 타이머 이벤트입니다. 마지막으로 예를 살펴보겠습니다.

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0; constructor(private http: Http) {}
 ngOnInit() { this.http.get(&#39;/counter-data.json&#39;)
    .map(res => res.json())
    .subscribe(data => { this.counter = data.value;
    });
 }
}

이 구성 요소가 초기화되면 초기 값을 얻기 위해 HTTP 요청을 보냅니다. 요청이 성공적으로 반환되면 구성 요소의 카운터 속성 값이 업데이트됩니다. 이 경우 속성 값을 변경하는 것은 XHR 콜백입니다.

이제 모델 변경을 일으키는 세 가지 유형의 이벤트 소스를 요약해 보겠습니다.

1. 이벤트: click, mouseover, keyup...

2. Timers: setInterval, setTimeout

3. ...)

이러한 이벤트 소스에는 공통된 기능이 있습니다. 즉, 모두 비동기 작업이라는 것입니다. 그러면 모든 비동기 작업이 모델에 변화를 가져올 수 있다고 생각할 수 있습니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

vue2.0 동적 바인딩 이미지 src 속성 값 초기화 오류 문제에 대한 해결 방법

create-react-app 느린 구성 프로젝트 해결 방법

vue 프로젝트 오류에 대한 해결 방법 webpackJsonp가 정의되지 않았습니다. 질문

위 내용은 Angular를 사용하여 변경 감지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!