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

Question

6

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

这只是该网站的一篇随机文章。您可以在那里检查上述提到的行为。我还看到ESPN网站没有使用Angular 2构建。

不过，我只是想知道如果我想使用Angular2来做这件事，该怎么做？也就是说，在滚动页面时更改地址栏中的URL或类似效果。

- Srikkant Srinivasan

3个回答

2

你有两个选择，使用哈希（#）或不使用它 :).

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

而且你需要说：

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

- Milad

我能理解你的意思。但是我不认为那是我想要的。也许我没有正确地提出问题。点击那个链接，你就会明白我想要实现什么。无论如何，还是谢谢你 :) - Srikkant Srinivasan

我刚刚又读了一遍你的问题和我的回答，不知道为什么我会这样说：:D:PDD: 它完全没有关联，可能是我喝醉了或者其他什么原因 :) - Milad

1

您可以在不重新加载页面的情况下，在Javascript中任意操作当前锚点。因此，当您使用以下语句设置URL时：

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

直到“1234”对路由器有意义，您才会重新加载页面。

- Karbos 538

但这意味着我们需要 '#' 对吧？基本上是在同一页内移动。然而，请检查该链接，当您滚动到新文章时，整个 URL 以及页面的标题都会更改。这就是我想知道的部分。 - Srikkant Srinivasan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Srikkant Srinivasan · Accepted Answer

如果还有人在寻找解决方案，以下是我最终采用的方法。通过查阅文档，我发现当路由器导航到呈现相同组件的路由时，组件不会重新初始化。

假设您有一个路由，呈现ItemComponent组件。

item/:id

当你像这样导航时。

item/3 -> item/4

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