Angular의 변경 감지(Change Discovery) 메커니즘 이해

추천 관련 튜토리얼: "angular Tutorial"

문제 현상

개발 과정에서 첫 페이지의 데이터가 업데이트되지 않는 문제에 직면했습니다. 프런트 엔드 페이지는 보간 표현식을 사용하여 백그라운드 데이터 필드를 바인딩합니다. 백그라운드 인터페이스가 성공적으로 호출되면 데이터 필드가 수정되지만 이때 프런트 엔드 페이지는 자동으로 업데이트되지 않습니다. 다음 코드에서 보듯이 보간식의 아주 기본적인 사용법이며 특별한 내용은 없습니다.

<span class="info-box-number text-success">{{sumDataDto.thirdAll}}</span>

this.platformDataProxy.getSumData(input)
      .subscribe((result: SumDataDto) => {
        if (result) {
          this.sumDataDto = result;
        }
      });

---

문제 원인

이 문제는 Angular - 변경 감지 기능과 관련이 있습니다. 사용된 프레임워크는 ABP 프레임워크이며, 프레임워크에서 자동으로 생성된 페이지에 changeDetection 속성이 추가됩니다. 이 속성은 현재 구성 요소의 변경 감지 전략이 OnPush임을 나타냅니다. changeDetection这条属性。这条属性指明了当前组件的变化检测策略是OnPush。

@Component({
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [appModuleAnimation()],
  changeDetection:ChangeDetectionStrategy.OnPush
})

关于变化检测策略，有两种：

• Default：Default策略是默认策略，只要有值发生变化，就对组件及其子孙组件进行检查。

• OnPush：OnPush策略是只有当输入数据（@Input

  import { ChangeDetectorRef } from “angular”;

  변경 감지 전략에는 두 가지 유형이 있습니다.

---

Default: Default 전략은 값이 변경되는 한 기본 전략입니다.

• OnPush: OnPush 전략은 입력 데이터(@Input)의 참조가 변경되거나 이벤트가 트리거될 때만 구성 요소가 변경 감지를 수행한다는 것입니다. 이 전략은 철저하지는 않지만 매우 효율적입니다.

해방 계획

옵션 1, 이 속성 할당 직접 삭제

옵션 2, 수동으로 변경 감지 수행

옵션 1은 매우 간단합니다. 구성 요소 설명에서 이 변경 감지 전략 할당을 직접 삭제하면 됩니다. . 이러한 방식으로 구성 요소는 기본 전략을 채택하지만 효율성이 떨어지는 단점이 있습니다.

옵션 2는 인터페이스를 성공적으로 호출한 후 변경 감지 메커니즘의 트리거 기능을 수동으로 호출하는 것입니다. 여기서는 변경 감지 개체가 사용됩니다.

먼저 변경 감지 모듈을 소개합니다

constructor(private changeDetection:ChangeDetectorRef) {}

그런 다음 변경 감지 개체를 선언합니다

• this.platformDataProxy.getSumData(input)
        .subscribe((result: SumDataDto) => {
          if (result) {
            this.sumDataDto = result;
            this.changeDetection.detectChanges();
          }
        });

  인터페이스 호출이 성공한 후 변경 감지 메서드를 호출합니다

  rrreee
C#의 가비지 수집 메커니즘을 수동으로 호출하는 것과 약간 비슷합니다.

• 참고자료:

https://links.jianshu.com/go?to=https%3A%2F%2Fsegmentfault.com%2Fa%2F1190000010928087

https://links.jianshu.com / go?to=https%3A%2F%2Fwww.cnblogs.com%2Flskzj%2Fp%2F11143233.html🎜🎜🎜🎜🎜더 많은 프로그래밍 관련 지식을 보려면 🎜프로그래밍 교육🎜을 방문하세요! ! 🎜🎜

위 내용은 Angular의 변경 감지(Change Discovery) 메커니즘 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!