想要使用子模块从一个页面导航到另一个页面

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 异常：未捕获（承诺中）：错误：无法匹配任何路由。 URL 段：'LoadProcResultsdata' 错误：无法匹配任何路由。 URL 段：'LoadProcResultsdata'

Answer 1

有几个问题，

从路径中删除前面的/，

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

另外你需要使用路由参数而不是查询参数，所以你可以在下面使用，

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

我假设 this.results 是一些 ID，所以生成的 url 变成了

/LoadProcResultsdata/<id>

阅读更多关于路由参数here。

更新：

您可以这样做，但不能使用路由参数，只需使用 queryParams，删除 :procResults，并使用类似下面的代码，

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

let navigationExtras: NavigationExtras = {
  queryParams:extra
};

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

并在导航组件中订阅ActivatedRoute queryParams，

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

检查这个Plunker!!

另一个Plunker with Lazy loaded module。