Angular 4 : Routing to a route doesn't work

Question

我不明白 Angular 4 中路由的一些基本概念。

index.html:

<base href="/">

文件结构:

- app
|- app.routings.ts
|- collections
|-- collection.component.ts
|-- collection.component.html
|-- collectioninfo.component.ts
|-- collectioninfo.component.html
|- shared
|-- header.component.html
|-- header.component.ts

我的 header.component.html 中有一个链接:

<a class="nav-link" [routerLink]="['/collections']">
    Collections
</a>

如果我点击它，我将登陆 localhost:4200/collections。单击按钮时，将以编程方式更改 url(在 collection.component.ts 中):

this.router.navigate(['/collections/', collection.name]);

我最终访问了 localhost:4200/collections/name - 一切正常。现在我想以编程方式返回到/collections(在 collectioninfo.component.ts 中):

this.router.navigate(['/collections']);

但这行不通。 url 没有改变，我收到一条错误消息，指出无法加载参数 - 所以显然/collections/name 正在再次加载。认为这可能是一个路径问题，但这样的事情也不起作用:

this.router.navigate(['../collections']);

附加信息:当我在/collections 上手动重新加载页面时，我再次被转发到主页，但我认为这是另一个问题，与此行为无关。

app.routing.ts:

const APP_ROUTES: Routes = [
  ...
  { path: 'collections', component: CollectionComponent },
  { path: 'collections/:id', component: CollectionInfo },
];

Answer 1

原来我的 firebase 代码搞砸了 - 它试图在转到另一条路线之前重新加载页面。导致错误，因为之前路由传来的一些参数丢失了。

export const routing = RouterModule.forRoot(APP_ROUTES, { enableTracing: true })

在 app.routing.ts 中对于调试非常有用。