Angular guards for navigating to a parent route

Question

I've got an application with the following routes:

• /root/foo
• /root/bar
• /root/foo/(outlet:X)
• /root/bar/(outlet:X)

Navigating to /root/foo or /root/bar will compute a value X and redirect to /root/foo/(outlet:X) or /root/bar/(outlet:X) respectively.

Is there a way to implement a Guard such that clicking a router link to /root/foo from /root/foo/(outlet:X) will be prevented?

Answer 1

您可以实现canDeactivate保护，检查当前和目标URL，并在特定情况下阻止导航。

Answer 2

I managed to get it working by using a CanDeactivate guard, but on the child components.

Route example: { path: 'root/foo', component: ListComponent, children: [ { path: ':id', canDeactivate: [CanNavigateToParentRouteGuard], component: ChildComponent, outlet: 'outlet' } ] }, Guard: canDeactivate(component: ChildComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): boolean { return !currentState.url.startsWith(nextState.url); } canDeactivate(component: ChildComponent, currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState?: RouterStateSnapshot): boolean { return !currentState.url.startsWith(nextState.url); }