[angular] markForCheck ()와 detectChanges ()의 차이점은 무엇입니까?

문서에서 :

detectChanges () : 무효

변경 감지기와 해당 하위 항목을 확인합니다.

즉, 모델 (클래스) 내부의 항목이 변경되었지만 뷰를 반영하지 않은 경우 Angular에 변경 사항을 감지하고 (로컬 변경 감지) 뷰를 업데이트해야 할 수도 있습니다.

가능한 시나리오는 다음과 같습니다.

1- 변경 감지기가보기에서 분리되었습니다 ( 분리 참조 ).

2- 업데이트가 발생했지만 Angular 영역에 없었으므로 Angular는 이에 대해 알지 못합니다.

타사 기능이 모델을 업데이트하고 그 후에 뷰를 업데이트하려는 경우와 같습니다.

 someFunctionThatIsRunByAThirdPartyCode(){
     yourModel.text = "new text";
 }

이 코드는 Angular 영역 외부에 있기 때문에 변경 사항을 감지하고보기를 업데이트해야합니다.

 myFunction(){
   someFunctionThatIsRunByAThirdPartyCode();

   // Let's detect the changes that above function made to the model which Angular is not aware of.
    this.cd.detectChanges();
 }

참고 :

위의 작업을 수행하는 다른 방법이 있습니다. 즉, 각도 변경주기 내에 해당 변경을 가져 오는 다른 방법이 있습니다.

** zone.run 내부에서 해당 타사 기능을 래핑 할 수 있습니다.

 myFunction(){
   this.zone.run(this.someFunctionThatIsRunByAThirdPartyCode);
 }

** setTimeout 안에 함수를 래핑 할 수 있습니다.

myFunction(){
   setTimeout(this.someFunctionThatIsRunByAThirdPartyCode,0);
 }

3- change detection cycle완료 후 모델을 업데이트 하는 경우도 있습니다.이 경우이 두려운 오류가 발생합니다.

“확인 된 후 표현이 변경되었습니다”;

이것은 일반적으로 (Angular2 언어에서) 의미합니다.

허용 된 방법 중 하나 (이벤트, XHR 요청, setTimeout 및 …)로 인한 모델 변경을보고 변경 감지를 실행하여보기를 업데이트하고 완료했지만 다른 것이있었습니다. 코드에서 함수를 다시 업데이트하여 모델을 다시 업데이트했으며 AngularJS와 같은 더티 검사가 더 이상 없기 때문에 변경 감지를 다시 실행하고 싶지 않습니다. 우리는 단방향 데이터 흐름을 사용해야합니다!

이 오류가 분명히 나타납니다. : P

그것을 고치는 몇 가지 방법 :

1- 올바른 방법 : 업데이트가 변경 감지주기 내에 있는지 확인하십시오 (Angular2 업데이트는 한 번만 발생하는 한 가지 흐름이며, 그 후에 모델을 업데이트하지 말고 코드를 더 나은 장소 / 시간으로 이동하십시오).

2- 게으른 방법 : angular2를 행복하게하기 위해 업데이트 후 detectChanges ()를 실행하십시오. 이것은 가장 좋은 방법은 아니지만 가능한 시나리오가 무엇인지 물었을 때, 그중 하나입니다.

당신이 말하는 방식 : 진심으로 변경 감지를 실행했음을 알고 있지만 확인을 마친 후에 즉시 업데이트해야하기 때문에 다시 수행하고 싶습니다.

3- 영역에 의해 패치되고 완료된 후에 실행 setTimeout되므로 코드를에 넣 습니다.setTimeoutdetectChanges

문서에서

markForCheck() : void

모든 ChangeDetectionStrategy 조상을 확인할 것으로 표시합니다.

이것은 구성 요소 의 ChangeDetectionStrategy 가 OnPush 인 경우에 주로 필요 합니다 .

OnPush 자체는 다음 중 하나가 발생한 경우에만 변경 감지를 실행 함을 의미합니다.

1- 컴포넌트의 @input 중 하나가 완전히 새로운 값으로 바뀌 었거나 @Input 속성의 참조가 완전히 바뀌었을 경우 간단히 넣습니다.

따라서 구성 요소의 ChangeDetectionStrategy 가 OnPush 이고 다음이있는 경우

   var obj = {
     name:'Milad'
   };

그런 다음 다음과 같이 업데이트 / 변경하십시오.

  obj.name = "a new name";

이것은 obj 참조를 업데이트하지 않으므로 변경 감지가 실행되지 않으므로보기가 업데이트 / 변경을 반영하지 않습니다.

이 경우 뷰를 확인하고 업데이트하도록 수동으로 Angular에 지시해야합니다 (markForCheck).

그래서 당신이 이것을했다면 :

  obj.name = "a new name";

이 작업을 수행해야합니다.

  this.cd.markForCheck();

오히려 아래에서 변경 감지가 실행됩니다.

    obj = {
      name:"a new name"
    };

이전 obj를 완전히 새로운 것으로 대체했습니다 {}.

2- 클릭과 같은 이벤트가 발생했거나 하위 구성 요소가 이벤트를 생성했습니다.

같은 이벤트 :

• 딸깍 하는 소리
• 키업
• 구독 이벤트
• 기타

간단히 말해서 :

• detectChanges()각도가 변경 감지를 실행 한 후 또는 업데이트가 각도 세계에 전혀없는 경우 모델을 업데이트 한 경우 사용 합니다.

• 사용 markForCheck()당신은 인 OnPush를 사용하고 당신은을 우회하는 경우 ChangeDetectionStrategy일부 데이터를 돌연변이에 의해 또는 당신은 내부의 모델을 업데이트했습니다 에서는 setTimeout을 ;

답변

@Injectable()
export class ApplicationRef_ extends ApplicationRef {
  ...
  tick(): void {
    if (this._runningTick) {
      throw new Error('ApplicationRef.tick is called recursively');
    }

    const scope = ApplicationRef_._tickScope();
    try {
      this._runningTick = true;
      this._views.forEach((view) => view.detectChanges()); <------------------

export function markParentViewsForCheck(view: ViewData) {
  let currView: ViewData|null = view;
  while (currView) {
    if (currView.def.flags & ViewFlags.OnPush) {
      currView.state |= ViewState.ChecksEnabled;  <-----------------
    }
    currView = currView.viewContainerParent || currView.parent;
  }
}