Angular 2-更改檢測問題

Question

我正在為我的應用程序使用Angular 2.1.1 。

腳本
考慮兩個相互影響的組件。 DeviceSettingsComponent處於活動狀態，並且對用戶可見。 它具有關閉按鈕，例如：

<a class="close" (click)="closeDeviceSettings()">&times;</a>

按鈕處理程序方法基本上只發出一個事件：

private closeDeviceSettings(): void {
    this.sharedService.broadcast('deviceSettingsClosed');
}

MainComponent正在監聽該事件：

this.sharedService.on('deviceSettingsClosed', () => this.isDeviceSettingsOpen = false);

從MainComponent模板中：

<div class="main-device-settings" *ngIf="isDeviceSettingsOpen">
    <device-settings [device]="openSettingsData.device"></device-settings>
</div>

在Angular 2.1.1可以正常工作。

問題
當我更新到Angular 2.2.x ，單擊關閉按鈕與從DOM中刪除/刪除DeviceSettingsComponent之間有3-5秒的延遲。 沒有更改任何代碼（package.json中的Angular版本除外）。
我可以說這與事件isDeviceSettingsOpen ，單擊關閉按鈕時， MainComponent的isDeviceSettingsOpen屬性將立即更新。 在我看來，變更檢測被某種程度上延遲了。

有人知道發生了什么事嗎？

更新

在更新屬性后，我設法通過手動調用更改檢測來解決此問題：

constructor(private changeDetectorRef: ChangeDetectorRef) { }

ngOnInit() {
    this.sharedService.on('deviceSettingsClosed', () => {
        this.isDeviceSettingsOpen = false
        this.changeDetectorRef.detectChanges();
    });
}

現在立即從DOM中刪除了該組件。 但是我不喜歡這種解決方案，也不理解為什么有必要...

Answer 1

我在一個同事的項目中遇到了類似的問題。 問題在於組件模板上邏輯繁重（從表中的字符串解析日期）。

單擊該按鈕將觸發視圖刷新並再次解析所有日期。

嘗試刪除按鈕的單擊處理程序的內容，查看單擊按鈕后直到頁面再次響應之前是否還有3-5秒的延遲。 如果是這樣，則意味着問題不在處理程序上。

查看視圖（組件模板）上是否有復雜的邏輯。

在這種情況下，解決方案（如果是引起問題的原因）是將有問題的邏輯移至組件本身，並在視圖中使用計算結果。