0

我用 CanDeactivate 创建了一个路由守卫，它确定用户是否可以在有任何未保存的更改时离开页面，如果存在任何未保存的更改，则触发 MatDialog 模式。我查看了很多指南和类似的线程，并且我的代码正在运行（大部分情况下）。见下文：

这是路由守卫，它调用组件的 confirmRouteChange 函数，如果它有一个，并返回结果，一个Observable<boolean>：

@Injectable({
    providedIn: 'root'
})
export class UnsavedChangesGuard implements CanDeactivate<DirtyComponent> {
    canDeactivate(component: DirtyComponent): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
        return component?.confirmRouteChange ? component.confirmRouteChange() : true;
    }
}

这是confirmRouteChange的实现，它只是在表单脏时打开MatDialog并返回通知对话框何时关闭的Observable：

confirmRouteChange() {
        if (this.isDirty) {
            let dialogRef = this.matDialog.open(AlertModalComponent, {
                data: {
                    msg: 'Your changes have not been saved. If you leave this page, your changes will be lost.',
                    title: 'Changes have not been saved',
                    class: 'save-changes'
                }
            });

            return dialogRef.afterClosed();
        } else {
            return true;
        }
    }

这是我的模态保存/关闭选项的实现：

save() {
        this.dialogRef.close(false);
    }

    close() {
        this.dialogRef.close(true);
    }

所以这是我的问题：当我导航未保存的更改时，模式弹出（很好），应用程序根据模式中选择的选项正确导航（很好）；但是，在模式后面，我可以看到我的应用程序的其余部分导航离开页面，除了放置路由保护的组件。因此，如果我尝试导航到主页，我可以看到所有主页和未保存更改形式的组件。就好像它开始导航，停止，然后等待用户的响应。如果我使用本机confirm()对话框，它可以完美运行，这意味着应用程序在等待用户响应时会有效冻结。我相信这是因为如果我记录confirm()返回的内容，则在用户选择某些内容之前它不会返回任何内容。另一方面，dialogRef.afterClosed()立即返回 Observable，我猜这会触发导航，然后应用程序停止并等待用户的响应。

我认为我对模态的使用有问题，但我不确定是什么。任何帮助是极大的赞赏！

编辑：我认为该return dialogRef.afterClosed()语句在对话框完成打开之前执行，导致导航开始然后停止。

4

2 回答 2

0

这正是你描述它的方式。

你的路由守卫期望立即为真或假。它无法处理可观察对象。

所以我的建议是做以下事情。

第一的

进行检查，但当组件脏时直接返回 false，以便路由保护防止重新路由。建立一个服务，它存储新路由并包含一个名为的字段，例如reroutingAllowed. 这最初设置为false。

canDeactivate(component: DirtyComponent): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return component?.isDirty();
}

confirmRouteChange() {
    // here we already take the new field into account
    if (this.isDirty && !reroutingAllowed) {
        let dialogRef = this.matDialog.open(AlertModalComponent, {
            data: {
                msg: 'Your changes have not been saved. If you leave this page, your changes will be lost.',
                title: 'Changes have not been saved',
                class: 'save-changes'
            }
        });

        // directly return false
        return false;
    } else {
        return true;
    }
}

第二

并行记住用户想要在您的服务中访问的新路由目标，以便在用户在模态对话框中做出决定时访问它。

第三

等待用户回答对话。如果他想离开当前页面，请将变量设置reroutingAllowed为true并触发 Angular 路由器再次调用新的路由目标。

这次守卫会让用户通过，尽管表单仍然很脏。

您只需要考虑如何设置上述服务以及如何获取和记住新的路线目标。

于 2021-04-23T19:53:27.927 回答
0

我有完全相同的问题。我可以通过简单地将 observable 转换为 Promise 来解决它。

代替：

dialogRef.afterClosed()

这应该可以解决问题：

dialogRef.afterClosed().toPromise()
于 2022-01-25T18:00:29.937 回答