Angular 2+: Accessing Route in Transit Query Params and not the Current Active Route

Question

Problem: I am trying to access the query params that a route guard is checking, and not the current url snapshot query params.

ActivatedRoute only shows the current route status they are on, and not the one that is in transit. So if I am on page 'app/users/list', the route snapshot is 'app/users/list' when the information is pulled for the canActivatedChild guard, but I am trying to access the link they are going to and not where they are coming from. (which is what Angular is suppose to do; which is the current active snapshot)

Question: How does one access a child's query params route that is in transit that is suppose to be guarded against?

Scenario: I have a user's list table, and each user can either go to a dashboard or a editor screen for completion before entering the dashboard. So when a user clicks on a user from the user list table, the route guard should check to see if the user has had certain properties are not null before proceeding to the dashboard, and if they have some null properties they are directed by the guard to the editor page. The dashboard page is guarded by a canActivatedChild guard that decides if a user's details can be shown in that dashboard based on if they have all of the information available, and if not they are redirected to the editor for completion.

 // The Link
 this.router.navigate(['/dashboard', { id: userId }])


 // The Guard
 @Injectable()
 export class CanShowUserDashboard implements CanActivateChild {

   constructor(
     private _router: Router,
     private _route: ActivatedRoute
   ) {}

   canActivateChild() {
    this._route.queryParams.subscribe((next) => {
       let queryParams = next.id;
       // queryParams is undefined
    })
   }
  }

Goal Getting the query params from the dashboard link, and not the current active user's list page.

Only Solution I got? Was thinking about passing the user into a service, and have the guard access the service to pull the information.

Answer 1

The canActivateChild function receives the ActivatedRouteSnapshot of the child route as the first parameter.

export interface CanActivateChild {
    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean;
}

So you can get the user ID from the childRoute argument.

@Injectable()
export class CanShowUserDashboard implements CanActivateChild {

    canActivateChild(childRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
         // prints the value of userId
         console.log(childRoute.queryParams['id']);
    }
}