我在 Angular2 中遇到了路由问题。
- 我的模块是延迟加载的（但到目前为止基本的“loadChildren”方法没有问题）
- 模块本身正在加载（在开发工具的网络选项卡中看到）
我的问题：
请参阅下面我的路由代码。第一个版本工作正常。当我创建到 的 routerLink 时，找到了路由并且没有抛出任何错误。
但是，为什么我的第一个摘录有效，而第二个摘录无效？？？我不想创建一个伪路径“测试”只是为了让它工作。第二个示例是收到此错误消息。
[...]无法匹配任何路线。 URL 段：'mypath'[...]
工作路线：
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
redirectTo: 'test'
},
{
path: 'test',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
不工作路由：
children: export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
请不要依赖文件的命名等。我必须重命名路径等 - 从这个角度来看一切都很好。它只是关于路由。
应用程序路由.ts
{
path: 'mypath',
loadChildren: 'app/modules/myModule/my.module#MyModule'
},
延迟加载模块的较大摘录以了解结构：
import [...]
@Component({
selector: 'parent-split-view-layout-container',
template: `
<h1>Parent</h1>
<router-outlet></router-outlet>
`
});
export class ParentSplitViewComponent {}
@Component({
selector: 'split-view-layout-container',
template: `
<h1>Vertical Split View</h1>
<div id="left">
<router-outlet name="left"></router-outlet>
</div>
<div id="right">
<router-outlet name="right"></router-outlet>
</div>
`
});
export class SplitViewComponent {}
/* Routing Definition */
export const routes: Routes = [
{
path: '',
component: ParentSplitViewComponent,
children: [
{
path: '',
redirectTo: 'test'
},
{
path: 'test',
component: SplitViewComponent,
children: [
{
path: '',
redirectTo: 'list'
},
{
path: 'list',
component: MyListComponent,
outlet: 'left'
},
{
path: ':id',
component: MyDetailComponent,
outlet: 'right'
}
]
}
]
}
];
export const MyRouting: ModuleWithProviders = RouterModule.forChild(routes);
Angular2 版本：
"@angular/common": "~2.4.5",
"@angular/compiler": "~2.4.5",
"@angular/core": "~2.4.5",
"@angular/forms": "~2.4.5",
"@angular/http": "~2.4.5",
"@angular/material": "^2.0.0-beta.1",
"@angular/platform-browser": "~2.4.5",
"@angular/platform-browser-dynamic": "~2.4.5",
"@angular/router": "~3.4.5",
