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

У меня есть 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}
    );
  }

}