Question

我有一个包含一系列组件的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 repository demonstrating the issue here。

我是否错误配置了路由？

Answer 1

正如Eliseo正确指出的那样。我在路由器链接本身的路径开头错过了一个斜杠。

[routerLink] = [＆＃39;我的账户/概述＆＃39;]

应该是

[routerLink] = [＆＃39; /我的账户/概述＆＃39;]

值得注意的是，在我介绍儿童路线之前，它一直运作良好。

Angular 5子路线将路线添加到路线

1 个答案: