我需要在一个组件中检测路径参数和查询参数的url更改。
{ path: 'category/:key', component: CollectionPageComponent},
末尾的网址为类别/ t恤或类别/ t恤?page = 2 我需要获取所有基于 categoryLink 和具有分页的类别的产品。
我使用CombineLatest
combineLatest(this.route.params, this.route.queryParams)
.pipe(map(results => ({params: results[0].key, query: results[1]})))
.subscribe(results => {
console.log("run me");
console.log(results);
});
一切正常,除了一种情况下,它将像我的演示链接https://angular-ev2rns-subscribe-param-and-path-param.stackblitz.io
一样运行两次首先单击cat1,然后单击page1->发射一个。 第二次点击cat2->它会触发两次
然后我找到了其他解决方案
ngOnInit() {
// I have to handle it first time
this.categoryKey = this.activatedRoute.snapshot.params.key;
let page = this.activatedRoute.snapshot.queryParams.page;
// call service get data
this.sub = this.router.events.pipe(
filter((event) => event instanceof NavigationEnd)
)
.subscribe((event:NavigationEnd) => {
console.log("run me ");
this.categoryKey = this.activatedRoute.snapshot.params.key;
let page = this.activatedRoute.snapshot.queryParams.page;
console.log(this.categoryKey + "|" + page);
// call service get data
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
我不知道是否还有其他更好的解决方案。发布之前,我已经搜索了。 非常感谢。