如何检测角度7中的网址变化包括参数和查询参数

时间:2019-01-21 04:40:45

标签: angular

我需要在一个组件中检测路径参数和查询参数的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();
  }

我不知道是否还有其他更好的解决方案。发布之前,我已经搜索了。 非常感谢。

0 个答案:

没有答案