Question

嗯，我在问这个问题之前做了一些研究。我认为这是非常直接的常见情况。

这是我的锚标签。

  <a [routerLink]="['./product', 1]">Vitamins</a>

当使用时单击我通过将Id传递给Web API来获取数据。获取数据后，网址显示为http://localhost:4200/product/1。

在我的路线中，我将其配置为

{ path: 'product/:id', component: ProductComponent },

我想将此网址修改为http://localhost:4200/vitamins，这更有意义。我怎么能这样做？

我发现最接近的是这个，但这不是我要找的

Angular 2 : routing without changing URL

Answer 1

尝试使用位置对象。

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

constructor(public location: Location) {}

如果您想更新窗口URL而不重定向或使用路由器对象导航，请输入：

this.location.go('vitamins');

这应该写维生素＆＃39;在您的基本网址之后。

Answer 2

我可能只想链接到<a [routerLink]="'/product'">Vitamins</a>。使其成为可选项并在您的组件或服务中处理此案例（如果未通过id，则将其设置为1）

在其他情况下，您可能希望网址看起来像http://myexample.com/vitamins/2，否则无法直接链接（或者您将如何传递params？）例如，如果您不想为网址添加书签或者重新加载。

一种愚蠢的方法是使用location.go('/vitamins');（Location Docs）来更改地址栏中的网址，但不会触发angular router的任何路由更改。我称之为hacky，因为它可能有副作用，例如书签/重载问题，如果你在特定路线上（当然你可以用另一种方式解决这个问题，让我们说暂时保存localStorage中的当前路线参数）。

希望我能提供帮助。

在Angular 2 Route中将Id更改为Name

2 个答案: