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

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

我有一个应用程序的列表,用户可以过滤,顺序等,我想设置在url的queryParams所有过滤器激活,这样他就可以复制/粘贴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

其他回答

Try

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

将工作于同一路线导航,而不是单引号。

如果你想改变查询参数而不改变路由。见下文 下面的例子可能对你有帮助: 当前路由为:/search &目标路由是(没有重载页面):/search?查询=爱

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

请注意:您可以使用this.router。导航(['search']而不是this.router。导航((“。”)

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

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

更好的是-只有HTML:

<a [routerLink]="

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

大多数人投票的答案在一定程度上对我有用。浏览器的url保持不变,但我的routerLinkActive在导航后不再工作。

我的解决方案是使用lotit .go:

import { Component } from "@angular/core";
import { Location } from "@angular/common";
import { HttpParams } from "@angular/common/http";

export class whateverComponent {
  constructor(private readonly location: Location, private readonly router: Router) {}

  addQueryString() {
    const params = new HttpParams();
    params.append("param1", "value1");
    params.append("param2", "value2");
    this.location.go(this.router.url.split("?")[0], params.toString());
  }
}

我使用HttpParams来构建查询字符串,因为我已经使用它与httpClient一起发送信息。但你可以自己构建。

this._router.url.split("?")[0],是从当前url中删除所有之前的查询字符串。