Angular 2 - 动态更改URL（在地址栏中）

Question

我在ESPN网站上遇到过这种行为，并想知道如何使用Angular2实现这一目标。当我在那里阅读文章时，一旦文章完成，下一篇文章就会加载，地址栏中的URL会自动更改。一旦我向上滚动到旧文章，URL再次更改为旧文章。 例如，请使用此链接。

http://www.espn.in/football/barclays-premier-league/23/blog/post/3017450/phil-jones-and-henrikh-mkhitaryan-in-team-of-the-weekend

这只是该网站的一篇随机文章。你可以检查上面提到的行为。我还看到ESPN网站不是用Angular 2构建的。

尽管如此，我只是想知道我是否想要使用Angular2来做这件事，我该如何进行？也就是说，在滚动浏览页面或其他内容时更改地址栏中的URL。

Answer 1

您有两种选择，使用哈希（＃）或不使用它：）。

为了不使用哈希，您需要告诉您的服务器将所有请求重新路由到index.html，否则它将无法正常工作。

你需要说：

 RouterModule.forRoot( ROUTES , { useHash : false } )

Answer 2

如果有人还在寻求解决这个问题。

这就是我最终做的事情。通过文档，我意识到当路由器导航到呈现相同组件的路由时，组件不会再次初始化。

让我们假设你有这个渲染ItemComponent的路线。

item/:id

当你像这样导航时。

item/3 -> item/4

组件不会再次初始化。 我利用了这一点，并根据我在页面中的当前位置，导航到地址栏中我想要的URL。 这听起来并不完全令人信服，但确实有效。

Answer 3

您可以在Javascript中根据需要操作当前锚点，而无需重新加载页面。因此，当您使用以下网址设置网址时

location.href = location.href+ "#1234";   

您不会重新加载页面，直到＆＃34; 1234＆＃34;对路由器意味着什么。