angular - CanDeactivateGuard 不适用于确认订阅
问题描述
我需要创建 canDeactiovateGuard 以防止用户在尝试离开表单页面时丢失表单数据。下面的代码不起作用,因为 return canDeactivate 在 canDeactivate = 确认之前起作用。我不知道如何解决这个问题。
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<Component> {
canDeactivate(component: Component): boolean {
let canDeactivate: boolean;
if (component.formValueChanged) {
component.confirmService.confirm("You have unsaved data. Are you sure?")
.pipe(first())
.subscribe((confirmed: boolean) => {
canDeactivate = confirmed;
});
} else {
canDeactivate = true;
}
return canDeactivate;
}
}
解决方案
而是尝试返回一个Observable<boolean>
. 这可以通过诸如 RxJS map 之类的操作符来完成。无论哪种方式,在 CanDeactivate 或 CanActivate 等守卫中,基本上你永远不会使用subscribe()
,因为你不能从 a 中返回任何东西subscribe()
,而是返回Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree
:
import { map } from 'rxjs/operators';
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<Component> {
canDeactivate(component: Component): Observable<boolean> | boolean {
if (component.formValueChanged) {
// Return the observable instead of the subscription
return component.confirmService.confirm("You have unsaved data. Are you sure?")
.pipe(first())
// You may be able to remove map() assuming confirm() always returns Observable<boolean>
.map((confirmed: boolean) => confirmed);
}
return false;
}
}
推荐阅读
- javascript - 如何获取对象的第一个真值并返回相应的键?
- javascript - TestCafe ClientFunction TypeError 错误,因为文档未定义
- pandas - 如何使用 pandas 访问 hdf5 中的嵌套表
- django - django 注销和重定向
- symfony - 使用 phpDocumentor 生成的文档中缺少文件:在第 0 行找不到此文件的摘要
- python - 如何根据条件删除 Pandas 数据框中特定数量的随机行?
- javascript - 如何批量删除与 xpath 匹配的所有元素?
- android - 使用 Navgation Architechture 组件导航到其他 Fragment 时保持 Fragment 的状态
- excel - 自动筛选功能正在删除我的列标题
- windows - 从 Windows 上的 Anaconda 安装调用“conda run”的语法是什么?