角度5个子管线向管线添加括号

我有一个带有一系列组件的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,这些路由将得到完美解决。我的问题是,当我尝试使用[路由链接]指令呈现锚定时,实际应用于href的URL是

href=“/我的帐户/概述/(个人资料)”

而不是

href=“/配置文件”

对于ProfileComponent。因此,如果我使用[路由器链接(routerLink)]呈现导航项目列表,则每个项目都有一个实际上无法解析到组件的href。

如果有用的话,我有一个 Github repository demonstrating the issue here 。

我是否错误配置了路由?