각도 오차 해석: 오류를 검사한 후 표현식에 변화가 생겼습니다

내 동료가 Angular 프런트엔드 애플리케이션을 개발하는 동안 오류 메시지가 발생했습니다.오류 메시지는 다음과 같습니다.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value 'null', Current value: 'true'.

이 오류가 발생한 경우 그는 두 번째 페이지에서 첫 번째 페이지로 이동하는 후퇴 버튼 기능을 개발하고 있는데 그 중에서 첫 번째 페이지가 이전에 이미 나타났기 때문에 서로 다른 초기값을 사용하여 두 번째 페이지를 다시 보여야 한다.
Angular는 각 작업이 수행될 때마다 작업에 사용되는 값을 기억하기 때문에 이 오류가 발생합니다.부품 뷰의 oldValues 속성에 저장됩니다.모든 구성 요소를 검사한 후 Angular는 다음 요약 순환을 시작하지만, 실행하지 않고, 현재 값을 이전 요약 순환에서 기억한 값과 비교합니다.
이 추가 검사는 개발 모드에서만 실행됩니다.각도에서 위에서 아래로 이른바 단방향 데이터 흐름을 강제로 집행하다.상위 어셈블리 변경을 처리한 후 계층 구조에서 하위 어셈블리에서는 상위 어셈블리의 속성을 업데이트할 수 없습니다.
상기 문제의 가능한 해결 방안은 setTimeout을 사용하거나 ngAfterViewInit()에서 changeDetectorRef를 사용하여 변경 검사를 강제로 하는 것을 포함한다.detectChanges(), ChangeDetectorRef 클래스에는 다음 5가지 방법이 있습니다.

abstract class ChangeDetectorRef {
  abstract markForCheck(): void
  abstract detach(): void
  abstract detectChanges(): void
  abstract checkNoChanges(): void
  abstract reattach(): void
}

따라서 변경 테스트를 실행하고 하위 보기를 업데이트할 수 있습니다.나의 동료는 이 잘못이 해명된 후에 해결되어 매우 기뻤다.
최초 발표.2020년 9월 7일.