想用孩子模塊

Question

子單元

​const routes: Routes = [  
    { path: '', component: ProcComponent, 
     children:[{ 
      path: '/LoadProcResultsdata/:procResults', component: ProcResultsComponent, 
     }] 
    }  
]; 

App.Module.ts從一個頁面導航到另一個頁面

​const routes: Routes = [ 
{ path: 'app', component: AppComponent }, 
{ path: 'home', component: HomeComponent },  
{ path: 'treeview', component: TreeViewComponent }, 
{path:'Proc', loadChildren:'app/proc/Proc.Module#ProcModule'} 

]。

我的代碼

this.router.navigate(['/LoadProcResultsdata/'],{ queryParams: { procResults:this.results } }); 

但我得到下面的錯誤。

core.umd.js：3064 EXCEPTION：未捕獲（承諾）：錯誤：無法匹配任何路由。 URL段：'LoadProcResultsdata' 錯誤：無法匹配任何路由。 URL段：「LoadProcResultsdata」

Answer 1

有幾個問題，

刪除路徑前/，

children:[{ 
      path: '/LoadProcResultsdata/:procResults', component: ProcResultsComponent, 
     }] 

還需要使用路由PARAMS而查詢參數，所以你可以在下面使用，

this.router.navigate(['/LoadProcResultsdata', this.results]); 

我假定this.results是一些ID，所以所得到的URL變得

/LoadProcResultsdata/<id> 

瞭解更多abour route parmeters here。

更新：

，你可以這樣做，但不能與路由參數，可以只是queryParams，刪除:procResults，並使用類似的代碼如下圖所示，

let extra: any = ['abc','xyz']; 

let navigationExtras: NavigationExtras = { 
    queryParams:extra 
}; 

this.router.navigate(['/LoadProcResultsdata'],navigationExtras); 

，並在navigted組件訂閱ActivatedRoute queryParams，

constructor(private route: ActivatedRoute) { 
    route.queryParams.subscribe(params => { 
     console.log(params); 
    }) 
} 

檢查此Plunker ！其他Plunker with Lazy loaded module。

希望這有助於！