Angular 如何在include param和query param中检测url更改

我需要在一个组件中检测路径参数和查询参数的url更改

{ path: 'category/:key', component: CollectionPageComponent},

末尾的url将是例如类别/t-shirt或类别/t-shirt？page=2 我需要根据categoryLink和进行分页来获取类别的所有产品

我使用联合测试

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);
    });

一切正常，除了一个案例，将运行两次像我的演示链接

首先单击cat1，然后单击page1->fire one。 第二次点击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();
  }

我不知道还有没有更好的解决办法。在我发布这篇文章之前，我已经搜索过了。 非常感谢。

最好使用这个答案