6

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

这是返回 PromiseCanDeactivate的调用component.canDeactivate()解析为 false 的实现：

@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()足够多的次数（与应用程序的导航历史长度一样多）也会使导航返回到应用程序启动之前的页面。

这有什么问题？

4

1 回答 1

3

我知道这已经很晚了，但是我遇到了完全相同的问题，并想将其留在这里以供后代使用。正如另一个人所说，这是一个尚未解决的已知 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 树中。

于 2020-12-31T21:52:15.620 回答