Question

下面的代码描述了我的角度2应用程序中的路线

 RouterModule.forRoot( [
              {path:'' , component:HomeComponent},
              {path:'acategories/:id/products/:pid' , component:ProductComponent},                 
              {path:'acategories/:id/products' , component:ProductsComponent},                  
              {path:'acart' , component:CartComponent},
              {path:'about' , component:AboutComponent},
              {path:'aorders' , component:OrderDetailsComponent},
              {path:'asearch' , component: ProductSearchComponent},
              {path:'**',component:PageNotFoundComponent}
          ])

我的根组件有这些路线的链接，如下图所示

用户通过在文本框中输入文本并单击搜索按钮来搜索项目。一旦用户点击＆＃34;搜索＆＃34; ，以下方法在root组件中将被执行，它基本上导航到＆＃34; asearch＆＃34;路由。

onSearch() 
{       

    if(this.formGroup.valid) 
    {
    this.router.navigate(['asearch' , {search:this.formGroup.controls['search'].value}]);
    }
}

现在我面临的问题是，＆＃34; asearch＆＃34;路由已经处于活动状态[即当前活动路径＆＃34;]并且用户尝试要搜索项目，不会显示结果。

以下是ProductSearchComponent中的代码，它从服务器获取结果。

  ngOnInit() {

    console.log('ngOnInit()');

    this.route.params.subscribe( (params) => {
        this.search = params['search'];
    })

    this.service.searchProducts(this.search).subscribe( {
                                                next: (data) => { 
                                                                    this.products = data;
                                                                },
                                                error: (err) => { this.toaster.error(err) }
                                             })

}

Answer 1

当只有路径参数更改时，组件将被重用（而不是销毁和重新创建）。您只需稍微移动代码即可使其正常工作

  ngOnInit() {

    console.log('ngOnInit()');

    this.route.params.subscribe( (params) => {
      this.search = params['search'];

      this.service.searchProducts(this.search)
      .subscribe( {
        next: (data) => { 
          this.products = data;
        },
        error: (err) => { this.toaster.error(err) }
      })
    })
  }

确保将pathMatch: 'full'用于非重定向且不具有子路由的空路径路径

{path:'' , component:HomeComponent, pathMatch: 'full'}

另见Angular2 router 2.0.0 not reloading components when same url loaded with different parameters?

Answer 2

您正面临订阅/取消订阅的问题。你必须做下一个：

routeSubscriber: any;


ngOnInit() {

    this.routeSubscriber = this.route.params.subscribe( (params) => {
       this.search = params['search'];
    }) 
}


ngOnDestroy() {
    this.routeSubscriber.unsubscribe();
}

问题是您已经订阅了，因此您需要在下次尝试使用相同路线之前取消订阅。

关于Angular2中的路由

2 个答案: