Angular：如何在不更改路由的情况下更新queryParams

6 回答

• 8

  您可以使用新的查询参数导航到当前路径，这不会重新加载您的页面，但会更新查询参数 .

  像（在组件中）的东西：

  constructor(private router: Router) { }
  
  public myMethodChangingQueryParams() {
    const queryParams: Params = { myParam: 'myNewValue' };
  
    this.router.navigate(
      ['.'], 
      {
        queryParams: queryParams, 
        queryParamsHandling: "merge", // remove to replace all query params by provided
      });
  }
  

  请注意，虽然它赢得了't reload the page, it will push a new entry to the browser'的历史 . 如果要在历史记录中替换它而不是在那里添加新值，可以使用 { queryParams: queryParams, replaceUrl: true } .

  编辑：正如评论中已经指出的那样， [] 和 relativeTo 属性在我的原始示例中缺失，因此它也可以更改路径，而不仅仅是查询参数 . 在这种情况下，正确使用 this.router.navigate ：

  this.router.navigate(
    [], 
    {
      relativeTo: this.activatedRoute,
      queryParams: { myParam: 'myNewValue' },
      queryParamsHandling: "merge"
    });
  

  将新参数值设置为 null 将从URL中删除参数 .

  回复于 2024-05-05T20:02:01+08:00
• 4

  @RadosławRoszkowiak的回答几乎是正确的，除了 relativeTo: this.route 如下所示：

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {}
  
  changeQuery() {
    this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
  }
  

  回复于 2024-05-05T20:02:01+08:00
• 0

  在Angular 5中，您可以通过解析当前URL轻松获取和修改urlTree的副本 . 这将包括查询参数和片段 .

  let urlTree = this.router.parseUrl(this.router.url);
    urlTree.queryParams['newParamKey'] = 'newValue';
  
    this.router.navigateByUrl(urlTree);
  

  修改查询参数的"correct way"可能与下面的createUrlTree一样，从当前创建新的UrlTree，同时让我们使用NavigationExtras修改它 .

  import { Router } from '@angular/router';
  
  constructor(private router: Router) { }
  
  appendAQueryParam() {
  
    const urlTree = this.router.createUrlTree([], {
      queryParams: { newParamKey: 'newValue' },
      queryParamsHandling: "merge",
      preserveFragment: true });
  
    this.router.navigateByUrl(urlTree); 
  }
  

  要以这种方式删除查询参数，您可以将其设置为 undefined 或 null .

  回复于 2024-05-05T20:02:01+08:00
• 0

  如果要更改查询参数而不更改路径 . 看下面的例子可能对你有所帮助：当前路线是： /search ＆目标路线是（没有重装页面）： /search?query=love

  submit(value: string) {
  { this.router.navigate( ['.'],  { queryParams: { query: value } })
      .then(_ => this.search(q));
  }
  search(keyword:any) { 
  //do some activity using }
  

  请注意：您可以使用 this.router.navigate( ['search'] 而不是 this.router.navigate( ['.']

  回复于 2024-05-05T20:02:01+08:00
• 9

  首先，我们需要从角度路由器导入路由器模块并声明其别名

  import { Router } from '@angular/router'; ---> import
  class AbcComponent implements OnInit(){
  constructor(
      private router: Router ---> decalre alias name
    ) { }
  }
  

  1.您可以使用“router.navigate”函数更改查询参数，并传递查询参数

  this.router.navigate([], { queryParams: {_id: "abc", day: "1", name: "dfd"} 
  });
  

  它将更新当前即激活路径中的查询参数

  • 以下将重定向到abc页面，其中_id，day和name作为查询参数

  this.router.navigate（['/ abc']，{queryParams：{_ id：“abc”，day：“1”，name：“dfd”}}）;

  它将更新“abc”路径中的查询参数以及三个查询参数

  用于获取查询参数： -

  import { ActivatedRoute } from '@angular/router'; //import activated routed
  
      export class ABC implements OnInit {
  
      constructor(
          private route: ActivatedRoute //declare its alias name
        ) {}
  
      ngOnInit(){
         console.log(this.route.snapshot.queryParamMap.get('_id')); //this will fetch the query params
      }
  

  回复于 2024-05-05T20:02:01+08:00
• 104

  尝试

  this.router.navigate([], { queryParams: { query: value } });

  将用于除单引号之外的相同路线导航 .

  回复于 2024-05-05T20:02:01+08:00