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>

组件 typescript :

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

您可以使用位置提供商代替导航

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 钩子(Hook)内，没问题。要防止路由器更新浏览器历史记录，您必须传递replaceUrl: true参数

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

不强制 onSameUrlNavigation: 'reload' 配置 Angular 路由器无论如何都不会刷新您的页面，可以保持解决方案不变