Angular 2 : Routing to the same page and changing query parameters

Question

我有一个 Angular 2 项目，我想在其中执行以下操作:

假设我有一个 Component，它有一个支持分页和排序的数据表。我想要实现的是每次表格页面/大小和排序更改时，也更改 URL 参数。

但是，当我从 Router 访问特定组件时，我还想在 Address Bar 上设置默认 URL 参数所以我想到的顺序如下:

1. 不带参数导航到我的组件
2. 在 NgOnInit 上设置查询参数 Observable 并在接收到第一个参数时再次重新加载 url 以设置默认值
3. 每次参数更改时导航到当前路线。这将更改参数，因此查询参数 Observable 将发出事件。然后将触发一个新的 Ajax 调用。

现在这可能不是最好的主意，但我遇到的问题如下:1.第一次触发两次Ajax调用2. 如果我点击页面上的“当前路由”链接 NgOnInit 不会触发，所以我无法在地址栏中替换默认参数。

代码的简短版本如下(我故意省略了 imports/@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。相反，我从构造函数中的路由快照评估它们，并将数据提供给我的内部可观察对象，因此 View 可以显示 queryParams 说的任何内容。

当用户移动到“下一页”时，我只是为我的可观察对象提供新的偏移量(结果 View 自动更新)并使用新的查询参数导航到同一页面，如果它们与上一个查询参数不同(= > 没有页面重新加载，没有触发 queryParams，没有额外的 http 请求)。