Angular 2 路由器 - 附加 url 而不是导航到主路由器

Question

我有以下配置：

有 2 个 link 的主导航：

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

在第一个组件中我有一个 "details" link:

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

我的app.routing.ts:

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

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

1) 转到第一个组件 >>> localhost/First

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

3) 尝试转到第二个组件 (localhost/Second) >>> 但它是 localhost/detail/Second（每隔一次单击项目详细信息都会在 url, 所以我们得到 /detail/detail/Second, 等等.)

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

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

但是我不想要散列。

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

Answer 1

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

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

Angular 2 router - appends url rather than navigate to main