blocks|key|2692106|text|尝试使用Location对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2692107|import+{+Location+}+from+'@angular/common';

constructor(public+location:+Location)+{}|code-block|syntax|javascript|2692108|当您想在不重定向或导航路由器对象的情况下更新窗口URL时，请放置以下内容：|2692109|this.location.go('vitamins');|2692110|这应该在你的基本url后面写上'vitamins‘。|2692111|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Try using Location object.

<pre><code>import { Location } from '@angular/common';

constructor(public location: Location) {}
</code></pre>

And when you want to update the window URL without redirecting or navigating with router object, put this:

<pre><code>this.location.go('vitamins');
</code></pre>

This should write 'vitamins' after your base url.

blocks|key|2232061|text|我可能只会链接到<a+[routerLink]="'/product'">Vitamins</a>。将其设置为可选，并在组件或服务中处理这种情况(如果没有传递id，则将其设置为1)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2232062|在其他情况下，你可能希望url看起来像http://myexample.com/vitamins/2，否则直接链接是不可能的(或者你怎么传递参数呢？)例如，如果您不想将url加入书签或进行硬重新加载。|2232063|一个不错的方法是使用location.go('/vitamins');+(Location+Docs)，它会更改地址栏中的url，但不会触发angular+router的任何路由更改。我称它为hacky，因为它可能有副作用，比如如果你在特定的路线上，会有书签/重新加载问题(当然你可以用另一种方式来解决这个问题，比如说在localStorage中临时保存当前的路线参数)。|2232064|希望我能帮上忙。|2232065|entityMap|0|LINK|mutability|MUTABLE|url|https://angular.io/api/common/Location^0|8|15|27|2|2G|1|0|J|V|0|A|P|1Y|E|4G|C|11|D|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@$9|14|A|15|B|C]|$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|J|3|K|5|6|7|1D|8|@]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|M|$N|$5|O|P|Q|E|$R|S]]]]

I probably would just link to <code>&lt;a [routerLink]="'/product'"&gt;Vitamins&lt;/a&gt;</code>.
Make it optional and handle this case in your component or service (if no <code>id</code> is passed, set it to <code>1</code>)

In other cases you probably want the url to look like <code>http://myexample.com/vitamins/2</code> otherwise a direct link wouldn't be possible (or how would you pass the params otherwise?) for example if you wan't to bookmark the url or make a hard reload.

A hacky way would be to use <code>location.go('/vitamins');</code> (<a href="https://angular.io/api/common/Location" rel="nofollow noreferrer">Location Docs</a>) which will change the url in your address bar, but won't trigger any route changes of the <code>angular router</code>.
I call it hacky, because it can have sideeffects such as the bookmarking / reload problem if you're on a specific route (of course you could solve this in another way, lets say temporarily saving the current route param in <code>localStorage</code>).

Hope i could help.

Well, I did some research before asking this question. I thought this is very straight forward as this common scenario. 

This is my anchor tag. 

<pre><code> &lt;a [routerLink]="['./product', 1]"&gt;Vitamins&lt;/a&gt;
</code></pre>

When use click on that I am getting data by passing the Id to Web API. After getting data, the Url shows up as <a href="http://localhost:4200/product/1" rel="nofollow noreferrer">http://localhost:4200/product/1</a>.

In my route, I configured this as 

<pre><code>{ path: 'product/:id', component: ProductComponent },
</code></pre>

I would like to modify this URL as <a href="http://localhost:4200/vitamins" rel="nofollow noreferrer">http://localhost:4200/vitamins</a> which makes more sense. How can I do this ?

The closest I found is this but this is not what I am looking for

<a href="https://stackoverflow.com/questions/37054731/angular-2-routing-without-changing-url">Angular 2 : routing without changing URL</a>

Change Id to Name in Angular 2 Route

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

嗯，我在问这个问题之前做了一些研究。我认为这很简单，因为这是一个常见的场景。这是我的锚标签。 <a [routerLink]="['./product', 1]">Vitamins</a>当使用时，单击我通过将Id传递给Web API来获取数据。获取数据后，Url显示为。在我的路由中，我将其配置为{ path: 'p...

问在Angular 2 Route中将Id更改为Name
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Angular 2 Route中将Id更改为NameEN