Angular 。如何使用 Location.back() 使 CanDeactivate 正常工作

Question

我正在实现 CanDeactivate我的主要组件之一中的功能。为了测试它，我让它总是返回 false所以路线不能改变。

这是CanDeactivate调用 component.canDeactivate() 的实现返回一个解析为 false 的 Promise:

@Injectable()
export class CanDeactivateNewRecord implements 
CanDeactivate<NewRecordComponent> {
    canDeactivate(
        component: NewRecordComponent,
        currentRoute: ActivatedRouteSnapshot,
        currentState: RouterStateSnapshot,
        nextState: RouterStateSnapshot ): 
        Observable<boolean>|Promise<boolean>|boolean {

        return component.canDeactivate();
    }
}

这是定义模块路由的片段:

const recordsRoutes: Routes = [
    {
        path: 'nou',
        component: NewRecordComponent,
        canDeactivate: [CanDeactivateNewRecord]
    },{
        path: ':id',
        component: RecordComponent
    }
];

当我使用方法 back服务 Location来自 @angular/common导航到上一页有两种不同的情况:

如果先前的位置由 Angular 路由器管理，则导航将被阻止，并且应用程序停留在该组件的路径上，

如果之前的位置在应用程序之外(例如，如果该组件的路由的 url 直接在浏览器导航栏中引入)它会在应用程序之外并加载上一个页面。

即使之前的位置是由路由器管理的，调用 location.back()足够多的时间(与通过应用程序的导航历史长度一样多)它使导航返回到应用程序启动之前的页面。

这有什么问题？

Answer 1

我知道这已经很晚了，但是我遇到了完全相同的问题，并想将其留在这里以供后代使用。正如另一个人所说，这是一个尚未解决的已知 Angular 问题。我可以使用一种解决方法，可以在这里找到:github
您的代码实现如下所示:

@Injectable()
export class CanDeactivateNewRecord implements CanDeactivate<NewRecordComponent> {
    constructor(
        private readonly location: Location;
        private readonly router: Router;
    ){}
    canDeactivate(component: NewRecordComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot ): Observable<boolean>|Promise<boolean>|boolean {
        if(component.canDeactivate()){
            return true
        }else{
            const currentUrlTree = this.router.createUrlTree([], currentRoute);
            const currentUrl = currentUrlTree.toString();
            this.location.go(currentUrl)
            return false
        }
    }
}

如果 canDeactivate 返回 false，则获取最近的路由并插入回 url 树中。