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：未捕获（在承诺中）：错误：无法匹配任何路由。网址细分：'LoadProcResultsdata' 错误：无法匹配任何路由。网址细分：'LoadProcResultsdata'

Answer 1

有几个问题，

从路径中删除前/

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

此外，您需要使用路径参数而不是查询参数，因此您可以使用下面的

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

我假设this.results是某个ID，因此生成的网址变为

/LoadProcResultsdata/<id>

阅读更多abour route parmeters here。

<强>更新

你可以这样做，但不能使用route params，只需使用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。

希望这会有所帮助!!

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

1 个答案: