我试图更新(添加,删除)queryParams从一个组件。在angularJS中,它曾经是可能的,这要归功于:

$location.search('f', 'filters[]'); // setter
$location.search()['filters[]'];    // getter

我有一个应用程序的列表,用户可以过滤,顺序等,我想设置在url的queryParams所有过滤器激活,这样他就可以复制/粘贴url或与他人共享。

但是,我不希望每次选择筛选器时都重新加载页面。

新路由器能做到吗?


当前回答

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

类似于(在组件中):

import {ActivatedRoute, Router} from '@angular/router';
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

注意,虽然它不会重新加载页面,但它会将一个新条目推送到浏览器的历史记录中。如果你想在历史记录中替换它,而不是在那里添加新的值,你可以使用{queryParams: queryParams, replaceUrl: true}。

编辑: 正如评论中已经指出的,[]和relativeTo属性在我最初的示例中缺失,因此它也可以更改路由,而不仅仅是查询参数。正确的this.router.navigate用法如下:

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

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

其他回答

你也可以像这样添加行为主体:

refresher$ = new BehaviorSubject(null);

我改变了我的代码:

this.route.queryParamMap.subscribe(some code)

to:

combineLatest([
    this.route.queryParamMap,
    this.refresher$
])
  .pipe(
     map((data) => data[0])
  )
  .subscribe(here is your the same code)

当你需要刷新订阅时,你需要调用这个:

this.refresher$.next(null);

不要忘记添加unsubscribe from the ngOnDestroy

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

类似于(在组件中):

import {ActivatedRoute, Router} from '@angular/router';
constructor(
    private router: Router,
    private activatedRoute: ActivatedRoute,
) { }

public myMethodChangingQueryParams() {
  const queryParams: Params = { myParam: 'myNewValue' };

  this.router.navigate(
    [], 
    {
      relativeTo: activatedRoute,
      queryParams: queryParams, 
      queryParamsHandling: 'merge', // remove to replace all query params by provided
    });
}

注意,虽然它不会重新加载页面,但它会将一个新条目推送到浏览器的历史记录中。如果你想在历史记录中替换它,而不是在那里添加新的值,你可以使用{queryParams: queryParams, replaceUrl: true}。

编辑: 正如评论中已经指出的,[]和relativeTo属性在我最初的示例中缺失,因此它也可以更改路由,而不仅仅是查询参数。正确的this.router.navigate用法如下:

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

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

Angular的Location服务应该在与浏览器的URL交互时使用,而不是用于路由。这就是为什么我们要使用位置服务。

angular HttpParams用于创建查询参数。请记住HttpParams是不可变的,这意味着在创建值时它必须被链接。

最后,使用this._location。replaceState更改为URL,而无需重新加载页面/路由和原生js位置。获取没有参数的url的路径,以每次重置参数。

constructor(
    private _location: Location,
) {}

...

updateURLWithNewParamsWithoutReloading() {
    const params = new HttpParams().appendAll({
        price: 100,
        product: 'bag'
    });

    this._location.replaceState(
        location.pathname,
        params.toString()
    );
}

更好的是-只有HTML:

<a [routerLink]="

注意,数组是空的,而不是只做routerLink=""或[routerLink]=" "" "

@ radossawroszkowiak的答案几乎是正确的,除了相对于:这个。路线要求如下:

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

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