10

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

索引.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 },
];
4

2 回答 2

6

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

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

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

于 2017-09-18T00:15:22.417 回答
5

this.router.navigate(['../collections']);在您尝试导航到的相对路径中localhost:4200/collections/collections。尝试this.router.navigate(['../']);

如果这不起作用，还提供 ActivatedRoute 作为 relativeTo 参数：

constructor(route: ActivatedRoute, router: Router) {}

navigate() {
  this.router.navigate(['../'], { relativeTo: this.route });
}

relativeTo通过创建相对于您提供的任何条目的路径来工作，它不一定需要是当前路线。

于 2017-09-13T15:39:01.093 回答