我在Angular2中遇到了路由问题 .
-
我的模块是延迟加载的(但到目前为止基本"loadChildren"方法没问题)
-
正在加载模块本身(在dev-tools的网络选项卡中可以看到)
My Problem:
请参阅下面的路由代码 . 第一个版本正常工作 . 找到路由,并且在创建routerLink时不会抛出任何错误 .
但是,为什么我的第一个摘录工作,第二个不?我不想创建一个伪路径“测试”只是为了让这个工作 . 第二个例子是获取此错误消息 .
[...]无法匹配任何路线 . 网址细分:'mypath'[...]
Working Routing:
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'
}
]
}
]
}
];
Not working Routing:
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'
}
]
}
]
}
];
请不要依赖于文件的命名等 . 我必须重命名路径等 - 从这个角度来看一切正常 . 它只是关于路由 .
App.routing.ts
{
path: 'mypath',
loadChildren: 'app/modules/myModule/my.module#MyModule'
},
Larger excerpt of lazy-loaded-module to understand the structure:
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",
2 回答
这是一个已知的错误 .
我一个月前报道https://github.com/angular/angular/issues/13807
它被关闭,因为它是一个副本:https://github.com/angular/angular/issues/10981
我也需要这个,但是自2016年8月26日问题开始以及“vsavkin于2016年11月16日取消了他们的任务”之后,我认为我们很快就会看到修复 .
我最终得到了一些非常糟糕的东西,而不是我用辅助路线做的事情,但工作必须跟上 . 我希望我能够帮助那个,但我不是......
EDIT: (13/06/18)
看起来fix今天已经合并了!
我找到了一个解决方法,感谢一些有用的人遇到了同样的问题 . 您的问题可能是您尝试在空路线上使用路由器插座作为子设备 . 通过将路由命名为静态值并使插座成为子节点,我能够解决类似的问题 .
正如其他人所说,你可以在这里追踪这个问题 - https://github.com/angular/angular/issues/10981
尝试改变
至