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 时，在单击关闭按钮和 DeviceSettingsComponent 被销毁/从 DOM 中删除之间有 3-5 秒的延迟。没有更改任何代码(除了 package.json 中的 Angular 版本)。
我可以说这不是事件的问题，MainComponent 中的 isDeviceSettingsOpen 属性会在单击关闭按钮时立即更新。在我看来，更改检测在某种程度上被延迟了。

有人知道发生了什么吗？

更新

我设法通过在更新我的属性后立即手动调用更改检测来修复它，如下所示:

constructor(private changeDetectorRef: ChangeDetectorRef) { }

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

该组件现在立即从 DOM 中删除。但我不喜欢这个解决方案，也不明白为什么有必要...

Answer 1

我在同事的项目中遇到过类似的问题。问题是组件模板上的逻辑很重(从表中的字符串解析日期)。

单击该按钮会触发 View 刷新并再次解析所有日期。

尝试移除按钮的点击处理程序中的内容，看看在您点击按钮后是否还有 3-5 秒的延迟，直到页面再次响应。如果是这样，则意味着问题不在于处理程序。

看看你在 View (组件模板)上是否有复杂的逻辑。

这种情况下的解决方案(如果它是问题的原因)是将有问题的逻辑移至组件本身并在 View 中使用计算的结果。