[angular] 구성 요소 속성이 현재 날짜 시간에 의존하는 경우 Angular2“확인 후 표현식이 변경되었습니다”예외를 관리하는 방법

그녀는 두 가지 해결책을 간다!

1. ChangeDetectionStrategy 를 OnPush로 수정

이 솔루션의 경우 기본적으로 각도를 말합니다.

변경 사항 확인을 중지하십시오. 내가 필요할 때만 할게

빠른 수정 사항 :

사용하도록 구성 요소 수정 ChangeDetectionStrategy.OnPush

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnInit {
    // ...
}

이로 인해 더 이상 작동하지 않는 것 같습니다. 지금부터 Angular를 detectChanges()수동으로 호출 해야하기 때문입니다.

this.cdr.detectChanges();

다음은 ChangeDetectionStrategy를 이해하는 데 도움이되는 링크입니다 .
https://alligator.io/angular/change-detection-strategy/

2. ExpressionChangedAfterItHasBeenCheckedError 이해

다음은 이 오류의 원인에 대한 tomonari_t 답변 의 작은 추출물입니다 .이를 이해하는 데 도움이되는 부분 만 포함하려고했습니다.

전체 기사는 여기에 표시된 모든 요점에 대한 실제 코드 예제를 보여줍니다.

근본 원인은 각도 수명주기입니다.

각 작업 후에 Angular는 작업을 수행하는 데 사용한 값을 기억합니다. 구성 요소보기의 oldValues ​​특성에 저장됩니다.

모든 구성 요소에 대해 점검이 완료된 후 Angular는 다음 다이제스트 사이클을 시작하지만 작업을 수행하는 대신 현재 값을 이전 다이제스트 사이클에서 기억 한 값과 비교합니다.

다이제스트 사이클에서 다음 작업을 확인하고 있습니다.

하위 구성 요소로 전달 된 값이 현재 이러한 구성 요소의 특성을 업데이트하는 데 사용되는 값과 동일한 지 확인하십시오.

DOM 요소를 업데이트하는 데 사용 된 값이이 요소를 업데이트하는 데 사용되는 값과 동일한 지 확인하십시오.

모든 하위 구성 요소를 확인합니다

따라서 비교 된 값이 다르면 오류가 발생합니다. 블로거 Max Koretskyi 는 다음과 같이 말했습니다.

범인은 항상 자식 구성 요소 또는 지시어입니다.

마지막으로 일반적으로이 오류를 발생시키는 실제 샘플이 있습니다.

• 공유 서비스
• 동기 이벤트 방송
• 동적 컴포넌트 인스턴스화

모든 샘플은 여기 (plunkr)에서 찾을 수 있습니다 . 제 경우에는 문제가 동적 구성 요소 인스턴스화였습니다.

또한, 내 자신의 경험에 의해 모든 사람을 피하는 것이 좋습니다 setTimeout 솔루션 . 제 경우에는 “거의”무한 루프를 일으켰습니다.

Angular 라이프 사이클을 항상 기억하여 다른 구성 요소의 값을 수정할 때마다 영향을받는 방식을 고려하는 것이 좋습니다. 이 오류로 Angular가 알려줍니다.

당신은 아마 이것을 잘못하고있을 것입니다. 확실합니까?

동일한 블로그에서도 다음과 같이 말합니다.

종종 수정은 올바른 변경 감지 후크를 사용하여 동적 구성 요소를 작성하는 것입니다.

나를위한 짧은 가이드는 코딩하는 동안 적어도 다음 두 가지를 고려하는 것입니다 ( 시간이 지남에 따라 보완하려고 노력할 것입니다 ).

1. 자식 구성 요소에서 부모 구성 요소 값을 수정하지 말고 대신 부모 구성 요소 값을 수정하십시오.
2. 사용 @Input하고 @Output지시문 을 사용할 때 구성 요소가 완전히 초기화되지 않으면 lyfecycle 변경 트리거를 피하십시오.
3. 불필요한 전화를 피하십시오 this.cdr.detectChanges(); 동적 특히 많은 동적 데이터를 처리 할 때 더 많은 오류를 유발할 수 있습니다.
4. this.cdr.detectChanges();필수 사용시 사용 @Input, @Output, etc중인 변수 ( )가 오른쪽 감지 후크 ( OnInit, OnChanges, AfterView, etc) 에서 채워지거나 초기화 되었는지 확인하십시오.
5. 가능한 경우 hide 대신 제거하십시오 . 이는 포인트 3 및 4와 관련이 있습니다.

또한

Angular Life Hook를 완전히 이해하려면 여기에서 공식 문서를 읽는 것이 좋습니다.

• https://angular.io/guide/lifecycle-hooks

답변

@Component({
  selector: 'app-spinner',
  templateUrl: './spinner.component.html',
  styleUrls: ['./spinner.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class SpinnerComponent implements OnInit, OnDestroy, AfterContentChecked {

  show = false;

  private subscription: Subscription;

  constructor(private spinnerService: SpinnerService, private changeDedectionRef: ChangeDetectorRef) { }

  ngOnInit() {
    this.subscription = this.spinnerService.spinnerState
      .subscribe((state: SpinnerState) => {
        this.show = state.show;
      });
  }

  ngAfterContentChecked(): void {
      this.changeDedectionRef.detectChanges();
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

}

@Component( {
  selector: 'app-my-component',
  template: `<p>{{ myData?.anyfield }}</p>`,
  styles: [ '' ]
} )
export class MyComponent implements OnInit {
  private myData;

  constructor( private myService: MyService ) { }

  ngOnInit( ) {
    /*
      async .. await
      clears the ExpressionChangedAfterItHasBeenCheckedError exception.
    */
    this.myService.myObservable.subscribe(
      async (data) => { this.myData = await data }
    );
  }
}

Promise.resolve(null).then(() => {
    console.log( "! changement de la date du composant !" );
    this.dateNow = new Date();
    this.cdRef.detectChanges();
});