Angular 5子路由向路由添加括号答案

【问题标题】：Angular 5 child routes adding parentheses to the routeAngular 5子路由向路由添加括号
【发布时间】：2018-08-30 21:04:43
【问题描述】：

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

我的路由配置有误吗？

【问题讨论】：

我认为问题出在你定义菜单项时：urls必须以“/”开头，所以，egmenuItems = [{ label: 'Overview', url: '/my-account /概述'},..];
非常感谢。看来我把事情复杂化了！

标签： angular angular2-routing parentheses brackets

【解决方案1】：

正如 Eliseo 正确指出的那样。我在 RouterLink 本身的路由开头缺少一个斜线。

[routerLink]=['my-account/overview']

应该是

[routerLink]=['/my-account/overview']

值得注意的是，在我引入子路由之前，它一直运行良好。

【讨论】：