Как получить доступ к queryParams в Resolver Angular

Question

Мне нужно реализовать поиск, передавая queryParams по маршруту от поискового компонента к компоненту userList (пример. / Search-result? User = "Alfred"). Перед загрузкой компонента userList мне нужно сделать вызов API с использованием queryParams в решателе userList, но параметры запроса продолжают отображаться как неопределенные.

Компонент поиска

search(searchTerm: string) {
    if (searchTerm) {
      this.router.navigate(['search-result'], { queryParams: { user: searchTerm } });
  }
}

UserList Resolver

export class UserResolver implements Resolve<User[]> {
  constructor(private userService: UserService, private route: ActivatedRoute) { }

  resolve(): Observable<User[]> {
    const searchTerm: string = this.route.snapshot.queryParams['user'];
    console.log(searchTerm); //Logs Undefined

    return this.userService.getUsers(searchTerm);
  }
}

Answer 1

Может быть, функция resolve запущена до того, как queryParams заполняется в URL. Попробуйте сделать это Rxjs способом.

import { filter, map, switchMap, tap } from 'rxjs/operators';
...
export class UserResolver implements Resolve<User[]> {
  constructor(private userService: UserService, private route: ActivatedRoute) { }

  resolve(): Observable<User[]> {
    return this.route.queryParams.pipe(
      tap(params => console.log(`Params: ${params}`)),
      // wait until params has user in it
      filter(params => !!params['user']),
      tap(params => console.log('after filter')),
      // extract the value of the user param
      map(params => params['user']),
      // switch to a new observable stream once we know the searchTerm
      switchMap(searchTerm => this.userService.getUsers(searchTerm)),
    );
  }
}

Edit

Используйте оператор tap для отладки потока. Посмотрите, что это за журнал, и убедитесь, что console.log( Params: $ {params} ) содержит пользовательские параметры.

Edit2

Попробуйте

this.router.navigateByUrl(`/search-result?user=${searchTerm}`);

, я думаю, что что-то не так с вашей навигацией.

Редактировать 3

Я думаю, queryParams можно прочитать только тогда, когда компонент сам загружается, а не во время выполнения распознавателей маршрутов, потому что он говорит, мне нужно go к маршруту search-result, дать мне данные до того, как я go до search-result, и это не зависит от queryParams. Чтобы исправить это, я следовал этому руководству (https://blog.thoughtram.io/angular/2016/10/10/resolving-route-data-in-angular-2.html).

1.) В app-routing-module.ts измените регистрацию пути на:

{ path: 'search-result/:user', component: UserListComponent, resolve: { users: UserResolver } },

Теперь пользователь будет параметром, за которым мы будем указывать в URL.

2.) В search.component.ts измените search на:

search(searchTerm: string) {
    if (searchTerm) {
      this.router.navigate([`search-result/${searchTerm}`]);
    }
  }

3.) В user-resolver.service.ts измените его на:

@Injectable({
  providedIn: 'root'
})

export class UserResolver implements Resolve<User[]> {
  constructor(private userService: UserService) { }

  resolve(route: ActivatedRouteSnapshot): Observable<User[]> {
    const searchTerm: string = route.paramMap.get('user');

    return this.userService.getUsers(searchTerm);
  }
}

I, когда консоль регистрирует searchTerm, это точное значение. Спасибо за предоставление StackBlitz, это помогло вам и мне.