Angular2: маршрутизация на ту же страницу и изменение параметров запроса

Question

У меня есть Angular 2 проект, где я хочу сделать следующее:

Допустим, у меня есть Component который имеет таблицу данных, которая поддерживает разбиение на страницы и сортировку. Чего я хочу добиться, так это чтобы каждый раз при изменении размера страницы / таблицы и сортировки таблицы URL Parameters,

Однако, когда я получаю доступ к конкретному компоненту из Router Я также хочу установить параметры URL по умолчанию на Address BarИтак, последовательность, о которой я подумал, была следующей:

1. Перейдите к моему компоненту без параметров
2. Настройте параметры запроса Observable на NgOnInit и после получения первых параметров перезагрузите URL снова, чтобы установить значения по умолчанию
3. Каждый раз, когда изменяется параметр, переходите к текущему маршруту. Это изменит параметры, поэтому параметр запроса Observable будет излучать событие. Тогда новый Ajax вызов будет активирован.

Сейчас это, вероятно, не лучшая идея, но у меня есть следующие проблемы: 1. Первый раз два Ajax звонки срабатывают 2. Если я нажму на ссылку "текущий маршрут" на странице NgOnInit не срабатывает, поэтому я не могу заменить в адресной строке параметры по умолчанию.

Короткая версия кода выглядит следующим образом (я намеренно пропустил примечания import /@Component и т. Д.):

export class MyComponent implements OnInit, OnDestroy {

  private params = {page: 0, size: 5}
  private activatedRoute: ActivatedRoute;
  private router: Router;
  private data = []

  private pageLoaded = false;
  private queryParamsSubscription = new Subscription();

  constructor(
    private router: Router, 
    private activatedRoute: ActivatedRoute
    private http: Http) {}

    ngOnInit(): void {
      this.queryParamsSubscription = this.activatedRoute.queryParams
        .debounceTime(100)
        .switchMap((routeParams) => {
          //assign the Url Parameters to my params object
          this.params = Object.keys(routeParams)
            .reduce((params, key) => {
              params[key] = routeParams[key];
              return params
            }, this.params);
          if(!this.pageLoaded) {
            //if the page is not leaded yet run reloadRoute and only replace 
            //the url (true flag) without adding to browser history
            //this will only run once
            this.reloadRoute(true);
            this.pageLoaded = true;
          }
          //finally perform the ajax call with the new params
          //so basically whenever the url parameters change
          //then fire an ajax call
          return this.findAll(this.params)
        })
        .subscribe((data) => {
            this.data = data;
          }
        );
  }

  //request data from the server
  findAll(params: any) {
    let urlParams: : URLSearchParams = //create urlParams from param
    return this.http.get(this.baseUrl, new RequestOptions({search: urlParams}))
     .map((res: Response) => res.json())
     .catch(err => {
       console.error(err);
       return Observable.from(err);
     })
  }

  ngOnDestroy(): void {
    this.queryParamsSubscription.unsubscribe();
  }

  onChangePageSize(size) {
    this.params['size'] = page.size
  }

  onChangePage(page) {
    this.params['page'] = page.page - 1;
    this.reloadRoute();
  }

  //this basically is called every time a parameter changes
  //so I navigate to the same page with the new parameters
  private reloadRoute(replaceUrl: boolean = false) {

    this.router.navigate(
      [this.activatedRoute.routeConfig.path], 
      {queryParams: params, replaceUrl: replaceUrl}
    );
  }

}

Answer 1

Я делаю нечто подобное, но не подписываюсь на queryParams. Вместо этого я оцениваю их по маршруту-снимку в конструкторе и передаю свои внутренние наблюдаемые данные, чтобы представление могло отображать то, что говорит queryParams.

Когда пользователь переходит на "следующую страницу", я просто добавляю свои наблюдаемые с новым смещением (представление результатов обновляется автоматически) и перехожу на ту же страницу с новым queryParams, если они отличаются от последней queryParams (=> нет страницы). перезагрузка, без триггера на queryParams, без дополнительного http-запроса).