关于 Angular2 中的路由答案

【问题标题】：About Routing in Angular2关于 Angular2 中的路由
【发布时间】：2017-05-14 21:48:27
【问题描述】：

下面的代码描述了我的 Angular 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}
          ])

我的根组件具有指向这些路由的链接，如下图所示

用户通过在文本框中输入文本并单击搜索按钮来搜索项目。一旦用户单击“搜索”，以下方法在根组件中将被执行，它基本上导航到“asearch”路线。

onSearch() 
{       

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

现在我面临的问题是，当“asearch”路线已经处于活动状态[即它当前的活动路线”] 并且用户尝试搜索项目，结果不显示。

下面是 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) }
                                             })

}

【问题讨论】：

如果不看是什么代码导致这些结果显示出来就很难判断。
@Günter Zöchbauer，将更新我的问题
如果没有像{path:'asearch/:id' , component: ProductSearchComponent} 这样的路径，它甚至可以工作吗？
确保将pathMatch: 'full' 用于没有重定向且没有子路由的空路径路由{path:'' , component:HomeComponent, pathMatch: 'full'},
现在我观察到的是，如果“asearch”已经是活动路由，那么 ngOnInit() 没有执行

标签： angular

【解决方案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?

【讨论】：

我在 1 分钟前做了同样的事情，检查我的 cmets :)

【解决方案2】：

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

routeSubscriber: any;


ngOnInit() {

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


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

问题是你已经订阅了，所以你需要在下次尝试从同一路由之前取消订阅。

【讨论】：