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

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.

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

want to navigate from one page to another page using child module

angular2-directives

angular2-template

angular2-routing