更新

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属性。在我看来，变化检测以某种方式延迟了。

有人知道发生了什么事吗？

更新

我设法通过在更新我的属性后立即手动调用更改检测来修复它：

constructor(private changeDetectorRef: ChangeDetectorRef) { }

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

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

Answer 1

我和一位同事的项目遇到了类似的问题。问题在于组件模板上的逻辑很重（从表中的字符串解析日期）。

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

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

查看视图（组件模板）上是否有复杂的逻辑。

在这种情况下，如果是问题的原因，解决方案是将有问题的逻辑移动到组件本身并使用视图中的计算产品。

角度2 - 变化检测问题

更新

1 个答案: