我有一个确认/取消模式对话框,当用户离开路线时会弹出该对话框。我通过使用带有canDeactivate方法的后卫来做到这一点。但是我希望canDeactivate能够等到它从模态中获得响应然后再返回任何内容。
我试图通过返回一个observable来做到这一点,但它无法正常工作。
canDeactivate(): Observable<boolean> | boolean {
if(this.isFormStarted()) {
this.formService.showExitModal(true);
return this.formService.getModalSelectionObservable();
}
else {
return true;
}
}
当我点击确认时,即使我在if块中执行console.log时可以看到observable正常工作,也没有发生任何事情
this.formService.getModalSelectionObservable().subscribe(
value => console.log("dialog value: " + value)
);
以下是表单服务的外观。
private modalConfirmation = new Subject<boolean>();
public setModalSelectionObservable(confirmLeave: boolean) {
this.modalConfirmation.next(confirmLeave);
}
public getModalSelectionObservable(): Observable<boolean> {
return this.modalConfirmation.asObservable();
}
答案 0 :(得分:7)
使用take(1)
或first()
(不要忘记导入)
return this.formService.getModalSelectionObservable().first();
确保在第一个事件发生后关闭observable,否则路由器将等待它从服务中关闭。
答案 1 :(得分:1)
将此放在这里以防将来有人像我一样粗心:
如果您的组件具有hasUnsavedChanges()
功能,则canDeactivate()
方法需要返回!hasUnsavedChanges()
。
但是如果你开始使用hasUnsavedChanges
的observable,你将会返回!hasUnsavedChanges$
,这只会是一个假值。
如果你需要支持两者,你可以这样做:
canDeactivate(component: C)
{
var hasUnsavedChanges = component.hasUnsavedChanges();
if (typeof (hasUnsavedChanges) === 'boolean')
{
return !hasUnsavedChanges;
}
else
{
return hasUnsavedChanges.map(x => !x);
}
}
答案 2 :(得分:0)
由于我正在使用初始值为BehaviorSubject
的{{1}},因此无法正常工作。
确保从null
创建Observable,例如:
Subject