我试图更新(添加,删除)queryParams从一个组件。在angularJS中,它曾经是可能的,这要归功于:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序的列表,用户可以过滤,顺序等,我想设置在url的queryParams所有过滤器激活,这样他就可以复制/粘贴url或与他人共享。
但是,我不希望每次选择筛选器时都重新加载页面。
新路由器能做到吗?
大多数人投票的答案在一定程度上对我有用。浏览器的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中删除所有之前的查询字符串。
我遇到过一个有趣的情况,我们对所有的路线只使用了一个组件。这是路线的样子:
const routes: Routes = [
{
path: '',
component: HomeComponent,
children: [
{ path: 'companies', component: HomeComponent },
{ path: 'pipeline', component: HomeComponent },
// ...
]
},
// ...
];
基本上,paths / /companies和/pipeline都有相同的组件需要加载。而且,由于Angular会阻止组件在DOM中之前被加载,所以Router的navigate方法会返回一个总是以null解析的Promise。
为了避免这种情况,我不得不使用onSameUrlNavigation。通过设置这个值为'reload',我设法使路由器导航到相同的URL与更新的查询字符串参数:
@NgModule({
imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload' })],
exports: [RouterModule]
})
在Angular 5中,你可以通过解析当前url来轻松获取和修改urlTree的副本。这将包括查询参数和片段。
let urlTree = this.router.parseUrl(this.router.url);
urlTree.queryParams['newParamKey'] = 'newValue';
this.router.navigateByUrl(urlTree);
修改查询参数的“正确方法”可能是使用
创建一个新的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。
你也可以像这样添加行为主体:
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