私のアプリケーションにAngular 2.1.1
を使用しています。角2 - 変化の検出の問題
シナリオ
相互作用する2つのコンポーネントを考えてみましょう。 DeviceSettingsComponent
がアクティブで、ユーザーに表示されます。ボタンハンドラメソッドは、基本的には、イベントを発する
<a class="close" (click)="closeDeviceSettings()">×</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から削除されます。しかし、私はこの解決策が気に入らず、なぜそれが必要なのか理解していません...
ボタンをクリックした直後にページをクリックすると(ページ内の任意の場所をクリックすると)速く更新されますか? – borislemke
いいえ、それはありません。 – lenny
ああ、私はそれが変化検出戦略の問題だと思ったが、それはそうではないことを確認した。プロジェクトでこの問題を再現できませんでした。共有サービスでSubscriptionとObservableを使用していますか? – borislemke