Angular 2 路由器 - 附加 url 而不是导航到 main答案

【问题标题】：Angular 2 router - appends url rather than navigate to mainAngular 2 路由器 - 附加 url 而不是导航到 main
【发布时间】：2017-09-09 08:08:23
【问题描述】：

我有以下配置：

带有 2 个链接的主导航：

<a href="#" [routerLink]="['/first']" first </a>
<a href="#" [routerLink]="['/second']"> second </a>

在第一个组件中，我有一个“详细信息”链接：

<div [routerLink]="['/detail', item.id]">

我的 app.routing.ts：

{path: 'first', component: FirstComponent},
{path: 'second', component: SecondComponent},
{path: 'detail/:id', component: DetailComponent }

在导航到 /detail:item 时，在第一个组件中一切正常。但是，当我尝试从主导航点击 B 链接时，我得到了错误的 URL。所以基本上是：

1) Goto First 组件 >>> localhost/First

2) 转到项目详细信息 >>> localhost/detail/someId

3) 尝试转到第二个组件 (localhost/Second) >>> 但它是 localhost/detail/Second （并且每次单击项目详细信息都会将另一个“/detail”附加到 url，所以我们得到 /detail /detail/Second 等。）

我试过了，没有'/'，但效果是一样的。我发现如果我将 useHash:true 添加到路由中，一切都会按预期工作。

 export const ROUTING: ModuleWithProviders = RouterModule.forRoot(ROUTES, {useHash:true});

但是我不想拥有哈希值。

我的问题是 - 为什么这与哈希一起工作并且没有。另外我该如何解决附加问题。任何关于路由的一般解释将不胜感激。谢谢！

【问题讨论】：

【解决方案1】：

import { APP_BASE_HREF } from '@angular/common';

问题是我使用的是 {provide: APP_BASE_HREF, useValue: './'}（带点）而不是 {provide: APP_BASE_HREF, useValue: '/'}。删除点修复它。

【讨论】：