我有一个带有一系列组件的 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="/我的帐户/概述/(个人资料)"
而不是
href="/个人资料"
对于 ProfileComponent。因此,如果我使用 [routerLink] 呈现导航项目列表,则每个项目都有一个实际上无法解析为组件的 href。
如果有帮助的话我有一个Github 存储库在此处演示了该问题 https://github.com/Joker2000/angular-routing.
我是否错误配置了路由?