想用孩子模块

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。

希望这有助于！