Angular6 在没有路由的情况下更新查询参数

Question

我正在处理的这个项目有很多带有搜索、排序和分页功能的列表。我完全能够使用这些条件（搜索、排序、分页）从 API 获取数据。

但是，我被要求制作一个“可共享链接”，以便用户可以在两者之间共享他们的查询列表。如果用户 A 将其列表按“客户”排序，并在第 5 页上将链接发送给用户 B，则他或她将打开第 5 页上按“客户”排序的相同列表。简单的。

我有一个可行的解决方案。我订阅了 ActiveRoute 上的 queryParams，解析这些参数，然后重新加载列表。请参阅下面的代码。

组件模板html：

<ngb-pagination [collectionSize]="size" [page]="page" (pageChange)="changePage" >
</ngb-pagination>
<pre>Current page: {{page}}</pre>

组件打字稿：

ngOnInit() {

    this.route
      .queryParams
      .subscribe(queryParams => {

          this.sort = queryParams['sort'];
          this.search = queryParams['search'];
          this.page= +queryParams['page'] || 1;

          this.refresh();
    });

    this.refresh();
}

refresh() : void {

    this.transactionsService.fetch({
      from: (this.page - 1) * this.size,
      take: this.size,
      search: this.search,
      sort: this.sort
    }).subscribe(data => {

      this.entities = data.entities;

      this.total_size = data.total;
    });

}

changePage(event: number) : void {

    this.router.navigate(['/transactions'], { 
      queryParams : { page: event},
      queryParamsHandling: 'merge'
    });
  }

但是，我认为这是一个肮脏的解决方案，特别是任何操作都是通过路由器处理的。我想首先避免在 ngOnInit 中订阅，然后以这种方式更新 changePage 函数：

 changePage(event: number) : void {

    this.page = event;

    this.refresh();

    // update query params without triggering navigation
    this.route.queryParams['page'] = this.page; ??????
  }'

这怎么可能？

Answer 1

您可以使用locationprovider代替导航

import { ActivatedRoute, Router } from '@angular/router';  
import { Location } from '@angular/common';

...
constructor(
    private router: Router,
    private location: Location,
    private activatedRoute: ActivatedRoute,
    ...
)

changePage(event: number) : void {
  ...       
  this.location.go(`${this.activatedRoute.url}?page=${event}` );
  ...
}

this.location.go 在这种情况下不会刷新窗口。

动态创建URL的方式：

const urlTree = this.router.createUrlTree([], {
    queryParams: { page: event },
    queryParamsHandling: 'merge',
    preserveFragment: true 
});

this.location.go(urlTree)

但是你可以在 ngOnInit 钩子里面留下订阅，没关系。要防止路由器更新，browser history您必须传递replaceUrl: true参数

this.router.navigate([], { 
  relativeTo: this.activatedRoute, 
  queryParams: 
  {
      page: event
  },
  replaceUrl: true,
});

没有强制onSameUrlNavigation: 'reload'配置角度路由器无论如何都不会刷新您的页面，可以保留您的解决方案原样