角2 - 変化の検出の問題

Question

私のアプリケーションにAngular 2.1.1を使用しています。

シナリオ
相互作用する2つのコンポーネントを考えてみましょう。 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で問題なく動作します。

通報
Iは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

私は同僚のプロジェクトで同様の問題に遭遇しました。問題は、コンポーネントのテンプレートに重いロジックがあったことです（テーブルの文字列からの日付の解析）。

ボタンをクリックすると、ビューが更新され、再びすべての日付が解析されました。

ボタンのクリックハンドラの内容を削除して、ページが再び反応するまでボタンをクリックしてから3〜5秒の遅延があるかどうかを確認してください。もしそうなら、問題はハンドラではないことを意味します。

ビュー（コンポーネントテンプレート）に複雑なロジックがあるかどうかを確認してください。

この問題の解決方法は、問題の原因である場合は、問題のあるロジックをコンポーネント自体に移動し、ビュー内の計算結果を使用します。