如何使用 ZoneJS 揭示導致 Angular ChangeDetection 的原因？

Question

我想知道是什么導致了我的 Angular（版本 8 - 我現在無法升級）應用程序中的更改檢測周期。 我想修補或攔截 ZoneJS ，以便查看觸發 CD 周期的原因。

（例如： tick()已由 HTML 輸入 keyup 事件偵聽器啟動。）

這是我的 main.ts 文件：

platformBrowserDynamic().bootstrapModule(AppModule).then(moduleRef => {
  const applicationRef = moduleRef.injector.get(ApplicationRef);
  const componentRef = applicationRef.components[0];
  enableDebugTools(componentRef);
}).catch(err => console.error(err));

這是猴子修補的tick() function 以查看應用程序的刻度。

export class AppModule {
  constructor(
    private readonly translate: TranslateService,
    applicationRef: ApplicationRef
  ) {
    translate.setDefaultLang('cz');

    const originalTick = applicationRef.tick;
    applicationRef.tick = function(): any {
      console.log('TICK');

      return originalTick.apply(this, arguments);
    };
  }
}

使用此設置，我可以在帶有[(ngModel)]的輸入文本中看到每個鍵盤輸入的兩個刻度（以及在組件中使用{{test()}} / console.log('Template Check')的四個模板檢查）。 我希望只有一個勾號和兩個模板檢查。

我發現我可以在這里使用TaskTrackingZoneSpec但我不能讓它工作。

Answer 1

Keydown 和 keypressed 事件正在觸發 - 因此在用戶輸入環境（和 xhr 請求）上調用更改檢測周期時進行 2 次檢查