how can i pass queryparams to my resolver

Question

here is my ngOnInit in my component -

  ngOnInit() {
    this.route.queryParams.subscribe(
      (params) => {
        console.log(params);
      }
    )
  }

here is my resolver -

class ProductsResolver implements Resolve<
      Pick<IProductInterface, 'image' | 'title' | 'price' | 'description'>[]>
{
  constructor(private productService: ProductService) {}

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Pick<
  IProductInterface, 'image' | 'title' | 'price' | 'description'>[]
  > {
    return this.productService.getProducts(
      route.paramMap.get('gender')! as ProductGender,
      +route.paramMap.get('category')! as ProductCategory,
      );
  }
}

how can i pass the params to the resolver. i am trying to get from my nav a link and then go to product-list page and present the data with the queryParams.

my html -

<a
   class="linkCategoriesInner__link"
   [routerLink]="['/product-list']"
   [queryParams]="{ gender: 'women', category: 6 }">
   Hats
</a>

What's the problem? ParamMap doesn't exist in the resolver? Why do you even want to use a resolver? You could just call the service in the component where you subscribe to `queryParams` — funkizer, Aug 05 '21 at 19:43

score 0 · Answer 1 · answered Aug 05 '21 at 20:04

I think Resolvers are a thing from the past (AngularJS versions below 2). This is how I would do it: Assign an Observable from the service to the template and subscribe to it using AsyncPipe. This way it's safe for ChangeDetectionStrategy.OnPush.

// component.ts

constructor(private productService: ProductService) {}

ngOnInit() {
  this.products$ = this.route.paramMap.pipe(
    switchMap(pMap => this.productService.getProducts(
        pMap.get('gender') as ProductGender,
        +pMap.get('category') as ProductCategory
      )
    )
  )
}

<!-- component.html -->
<ng-container *ngIf="products$ | async as products">
    {{ products | json }}
</ng-container>

would you mind to talk in discord maybe? i see you got a lot of years using angular and i got some question. Daniel#6172 — blablalbla3233, Aug 05 '21 at 20:24

score 0 · Answer 2 · answered Aug 05 '21 at 21:35

0

Resolvers get all the parameters of the route, you may access them using the route.paramMap member as usual.

Stackblitz demo

answered Aug 05 '21 at 21:35

Aviad P.

32,036
14
103
124

how can i pass queryparams to my resolver

2 Answers2