Return canDeactivate 中的 Observable 不工作

Question

我有一个 confirm/cancel 模式对话框，它会在用户离开路线时弹出。我通过使用带有 canDeactivate 方法的守卫来做到这一点。但是我希望 canDeactivate 在返回任何内容之前等到它收到模态的响应。

我试图通过返回一个可观察对象来做到这一点，但它不起作用。

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() 方法将需要 return !hasUnsavedChanges().

但是，如果您开始为 hasUnsavedChanges 使用可观察对象，您将 returning !hasUnsavedChanges$ 这将只是一个错误的值。

如果您需要同时支持两者，您可以这样做：

canDeactivate(component: C)
{
    var hasUnsavedChanges = component.hasUnsavedChanges();

    if (typeof (hasUnsavedChanges) === 'boolean')
    {
        return !hasUnsavedChanges;
    }
    else
    {
        return hasUnsavedChanges.map(x => !x);
    }
}

Answer 3

它对我不起作用，因为我使用的 BehaviorSubject 初始值为 null。

确保从 Subject 创建 Observable，例如：

private modalConfirmation = new Subject<boolean>();
public getModalSelectionObservable(): Observable<boolean> {
    return this.modalConfirmation.asObservable();
}

Return canDeactivate 中的 Observable 不工作

Return Observable in canDeactivate not working

angular2-router3

angular