我有一个带有一系列组件的Angular 5应用程序 . 有些组件是其他组件的子组件,有些组件则不是 .
我希望应用程序具有如下结构:
*/my-account/overview // homepage
*/my-account/my-stuff
*/profile
*/non-default
我有一个DefaultComponent,它包含一些通用元素,例如我希望在大多数页面上出现的网站导航(除了* /非默认路由/组件之外的所有内容) .
我的路由模块定义了以下路由:
export const routes: Routes = [
{ path: '', redirectTo: 'my-account', pathMatch: 'full' }, // should redirect to localhost:4200/my-account
{ path: '', component: DefaultComponent, children: [
{ path: 'my-account', children: [
{ path: '', redirectTo: 'overview', pathMatch: 'full' }, // should redirect to localhost:4200/my-account/overview
{ path: 'overview', component: OverviewComponent }, // should resolve: localhost:4200/my-account/overview
{ path: 'my-stuff', component: MyStuffComponent } // should resolve: localhost:4200/my-account/my-stuff
]},
{ path: 'profile', component: ProfileComponent } // should resolve: localhost:4200/profile
]},
{ path: 'non-default', component: NonDefaultComponent } // should resolve: localhost:4200/non-default
];
如果我直接在浏览器中点击URL,这些路径将完美解析 . 我遇到的问题是,当我尝试使用[routerLink]指令渲染锚点时,实际应用于href的URL是
href =“/ my-account / overview /(profile)”
而不是
href =“/ profile”
对于ProfileComponent . 因此,如果我使用[routerLink]呈现导航项列表,则每个项都有一个实际上没有解析到该组件的href .
如果它有帮助,我有Github repository demonstrating the issue here .
我是否错误配置了路由?
1 回答
正如Eliseo正确指出的那样 . 我在路由器链路本身的路径开头错过了一个斜杠 .
本来应该
[routerLink] = [ '/我的账户/概述']
值得注意的是,在我引入儿童路线之前,它一直运作良好 .