在 Angular 2 中设置 URL 参数答案

【问题标题】：Setting URL params in Angular 2在 Angular 2 中设置 URL 参数
【发布时间】：2017-03-17 16:28:43
【问题描述】：

我正在使用以下代码：

this.router.navigate(['/app/chart', {chartColor: this.color, chartWidth: this.width}]);

它设置了我的网址：

http://localhost/app/chart;chartColor=blue;chartWidth=600

而且没关系。但是当我调用该函数（将变量发送到 URL）时，我的组件正在重新加载。而且我真的不想要它。

我只想将变量发送到 URL

还有其他更好的方法来实现它吗？

【问题讨论】：

您正在使用router.navigate 从一个组件导航到另一个组件，因此您应该期望组件重新加载。您需要通过 URL 传递参数吗？
@YounesM 不，我只需要将它发送到同一个组件的 URL。我想让用户能够粘贴此 URL，并且此组件中的图表将宽度设置为 600 并将为 blue。这样用户就不用自己动手了。

【解决方案1】：

我不太了解 angular2，但对于 angular "1"，我使用以下内容：

首先我得到“基本 url”（协议 + 主机名）

Tbaseurl = location.protocol + "//" + location.host+'/';

然后我将“变量”添加到我的网址中

urlVar = "?chartColor=blue&chartWidth=600"

最后我将字符串 (url) 写入浏览器的历史记录：

window.history.pushState('name', '', Tbaseurl + urlVar);

这会将 url 保存到用户的浏览器历史记录中（因此，如果他们想返回一个页面，他们可以这样做）并且它会更新 url 而无需刷新页面

再次，我不能真正给你答案，因为我不知道 angular2 足以帮助你，但我希望这能提供足够的信息来帮助你解决你的问题

【讨论】：