我试图更新(添加，删除)queryParams从一个组件。在angularJS中，它曾经是可能的，这要归功于:
$location.search('f', 'filters[]'); // setter
$location.search()['filters[]']; // getter
我有一个应用程序的列表，用户可以过滤，顺序等，我想设置在url的queryParams所有过滤器激活，这样他就可以复制/粘贴url或与他人共享。
但是，我不希望每次选择筛选器时都重新加载页面。
新路由器能做到吗?
当前回答
更好的是-只有HTML:
<a [routerLink]="
注意，数组是空的，而不是只做routerLink=""或[routerLink]=" "" "
其他回答
你也可以像这样添加行为主体:
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
@ radossawroszkowiak的答案几乎是正确的，除了相对于:这个。路线要求如下:
constructor(
private router: Router,
private route: ActivatedRoute,
) {}
changeQuery() {
this.router.navigate(['.'], { relativeTo: this.route, queryParams: { ... }});
}
我遇到过一个有趣的情况，我们对所有的路线只使用了一个组件。这是路线的样子:
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。
我最终把urlTree和location.go结合起来
const urlTree = this.router.createUrlTree([], {
relativeTo: this.route,
queryParams: {
newParam: myNewParam,
},
queryParamsHandling: 'merge',
});
this.location.go(urlTree.toString());
不确定toString是否会导致问题，但不幸的是location。Go似乎是基于字符串的。
