Question

我有一个确认/取消模式对话框，当用户离开路线时会弹出该对话框。我通过使用带有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();
}

Answer 1

使用take(1)或first()（不要忘记导入）

return this.formService.getModalSelectionObservable().first();

确保在第一个事件发生后关闭observable，否则路由器将等待它从服务中关闭。

Answer 2

将此放在这里以防将来有人像我一样粗心：

如果您的组件具有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);
    }
}

Answer 3

由于我正在使用初始值为BehaviorSubject的{{1}}，因此无法正常工作。

确保从null创建Observable，例如：

Subject

在canDeactivate中返回Observable不起作用

3 个答案: