将Id更改为Angular 2路由中的名称

嗯，在问这个问题之前，我做了一些研究。我认为这是非常简单的，因为这是常见的情况。将Id更改为Angular 2路由中的名称

这是我的锚标签。

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

当使用点击，我通过传递Id到Web API获取数据。获取数据后，Url显示为http://localhost:4200/product/1。

在我的路线，我这配置作为

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

我想修改这个网址为http://localhost:4200/vitamins这更有意义。我怎样才能做到这一点？

我发现的最接近的是这个，但是这不是我期待的

Angular 2 : routing without changing URL

来源

2017-06-22 Chatra

只要名称是唯一的，您可以使用该名称作为id。 –

@RobinDijkhof名字不是不可靠的。即使你是独一无二的，我想我会把它当作http：// localhost：4200/product/Vitamins。但我不希望产品介于两者之间。谢谢 – Chatra

，或者你可以从'http：// localhost：4200/vitamins'执行'{path：'product /：productName /：id'，component：ProductComponent}' –

使用Location对象尝试。

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

constructor(public location: Location) {}

而且当你要更新，而不会重定向或路由器对象浏览窗口的URL，把这个：

this.location.go('vitamins');

这应该写自己的基本网址后“维生素”。

来源

2017-06-22 14:12:21 Khalav

不知道这是否是一种好的方法。我观察到Url首先显示为http：// localhost：4200/product/1，然后更改为http：// localhost：4200/vitamins。用户可以看到闪烁 – Chatra

而我观察到的另一件事是用户无法输入Website.com/Vitamins – Chatra

您可以尝试在您的ngOnInit方法中使用它。否则，你什么时候需要切换网址？ - 编辑然后，你应该实现一个新的路线与维生素 – Khalav

我大概会链接到<a [routerLink]="'/product'">Vitamins</a>。让它可选的，在您的组件或服务（如果没有id通过，将其设置为1）

在你可能想其他情况下，处理这种情况的URL看起来像http://myexample.com/vitamins/2否则直接的联系是不可能的（或者你会如何通过params？）例如，如果你不想给URL加书签或重新加载。

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

希望我能帮上忙。

来源

2017-06-22 14:13:43 lexith

将Id更改为Angular 2路由中的名称

回答

相关问题