如何将查询参数添加到守卫中的路由并将其传递给 Angular 4 中的组件？

Question

我在我的 Angular 4 应用程序中使用路由保护，如果条件满足并返回 true，我想向路由添加一个查询参数。

这是我一直在研究的代码

@Injectable()
export class ViewGuardService implements CanActivate {

  constructor(private router: Router) { }

  canActivate(activatedRoute: ActivatedRouteSnapshot, snapshot: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if(!this.router.url.includes('/order-management')) {
      //ADD PARAMS TO ROUTE OR PASS DATA TO COMPONENT HERE AND THEN RETURN TRUE
       return true;
    } else {
       this.route.navigate['/login'];
       return false;
    }
  }
}

通常，要导航到带有参数的路线，我们可以将其用作this.router.navigate(['/order-management', activatedRoute.url[0].path], { queryParams: { moveToOrders: true }});. 但如果我在if条件中使用这个条件，就会导致函数调用的无限循环。

那么如何将参数或数据从守卫传递到组件呢？请帮我解决这个问题。

Answer 1

这有点 hacky，但它有效（Angular 11）。

@Injectable({
  providedIn: 'root'
})
export class SetQueryParamGuard implements CanActivate {
  constructor(
    private _router: Router
  ) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> {
    const requiredQueryParam = route.queryParamMap.get('requiredQueryParam');

    // Query param is set, no further action
    if (requiredQueryParam) {
      return of(true);
    }

    return of(
               this._router
                   .parseUrl(state.url + `&requiredQueryParam=DEFAULT_VALUE`)
    );        
  }
}