關於在Angular2

路由下面的代碼說明了我的角2應用關於在Angular2

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

我的根組件具有指向這些航路，如下面的圖像描繪

用戶搜索某個項目通過在文本框中輸入文本並單擊搜索按鈕。一旦用戶單擊「搜索」，將在根組件中執行以下方法，其基本上導航到「搜索」路線。

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

}

來源

2016-12-30 refactor

很難說，沒有看到什麼代碼導致這些結果顯示在所有。 –

@GünterZöchbauer，將更新我的問題 – refactor

它會不會像{{：asearch /：id'，component：ProductSearchComponent}'這樣的路徑工作嗎？ – echonax

當只有路徑參數改變時，組件被重用（而不是被銷燬和重新創建）。你只需要移動你的代碼位，以保持它的工作

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?

來源

2016-12-30 16:05:02

我做了同樣的1分鐘後，檢查我的意見:) – refactor

你正面臨着訂閱的問題/退訂你下一步要做：

routeSubscriber: any; 


ngOnInit() { 

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


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

問題是您已訂閱，因此您需要在下一次嘗試從相同的路由之前取消訂閱它。

來源

2016-12-30 15:57:51

回答

相關問題