我正在使用的角度2，谷歌地图房地产网站等，当用户更改我执行指示地图的当前位置以及半径搜索的API地图的中心。问题是，我想反映在URL中这些值无需重新加载整个页面。那可能吗？我发现使用AngularJS 1.x中，但没有对角2一些解决方案。
你可以使用location.go(url)这将基本上改变您的网址，而无需改变应用程序的途径。
注意，这可能导致其他的效果就像从当前的路由重定向到孩子的路线。
Related question描述location.go不会贴心Router发生变化。
作为RC6，你可以做些什么来改变URL不改变状态的追随者，从而保持您的路线历史
import {OnInit} from '@angular/core';
import {Location} from '@angular/common';
// If you dont import this angular will import the wrong "Location"
@Component({
selector: 'example-component',
templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
constructor( private location: Location )
{}
ngOnInit()
{
this.location.replaceState("/some/newstate/");
}
}
使用location.go(url)是要走的路，但不是硬编码的网址，可以考虑使用router.createUrlTree()它产生。
既然你想要做以下电话路由器：this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})但无需重新加载组件，它可以被改写为：
const url = this
.router
.createUrlTree([{param: 1}], {relativeTo: this.activatedRoute})
.toString();
this.location.go(url);
我得到这个在angular2的RCX发布工作的主要麻烦。该位置包已经及运行location.go（）内部构造（）不会工作。它需要ngOnInit（）或更高版本的生命周期。下面是一些示例代码：
import {OnInit} from '@angular/core';
import {Location} from '@angular/common';
@Component({
selector: 'example-component',
templateUrl: 'xxx.html'
})
export class ExampleComponent implements OnInit
{
constructor( private location: Location )
{}
ngOnInit()
{
this.location.go( '/example;example_param=917' );
}
}
下面是关于此事的角资源：https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/common/index/LocationStrategy-class.html
对于像我这样的人发现这个问题，下面可能是有用的。
我有一个类似的问题，并使用location.go和location.replaceState在其他的答案这里建议最初尝试。但是我遇到了问题，当我不得不导航到另一个页面上的应用程序，因为导航是相对于当前的路线和当前路线不被location.go或location.replaceState更新（路由器不知道什么了解这些尽到URL）
从本质上讲，我需要当路由参数改变未重新加载页面/组件但并更新内部路由状态的解决方案。
我结束了使用的查询参数。你可以找到更多关于它在这里：https://angular-2-training-book.rangle.io/handout/routing/query_params.html
所以，如果你需要做的是这样保存的订单，并得到一个订单ID，您可以更新您的网址如下所示。在地图上更新中心位置和相关数据有异曲同工之处
// let's say we're saving an order. Initally the URL is just blah/orders
save(orderId) {
// [Here we would call back-end to save the order in the database]
this.router.navigate(['orders'], { queryParams: { id: orderId } });
// now the URL is blah/orders?id:1234. We don't reload the orders
// page or component so get desired behaviour of not seeing any
// flickers or resetting the page.
}
和你保持ngOnInit方法中它的轨道，如：
ngOnInit() {
this.orderId = this.route
.queryParamMap
.map(params => params.get('id') || null);
// orderID is up-to-date with what is saved in database now, or if
// nothing is saved and hence no id query paramter the orderId variable
// is simply null.
// [You can load the order here from its ID if this suits your design]
}
如果你需要直接去一个新的（未保存的）命令，你可以做订单页面：
this.router.navigate(['orders']);
或者，如果你需要去直接订购页面为现有（保存）命令，你可以这样做：
this.router.navigate(['orders'], { queryParams: { id: '1234' } });
我用这种方式来得到它：
const queryParamsObj = {foo: 1, bar: 2, andThis: 'text'};
this.location.replaceState(
this.router.createUrlTree(
[this.locationStrategy.path().split('?')[0]], // Get uri
{queryParams: queryParamsObj} // Pass all parameters inside queryParamsObj
).toString()
);
- 编辑 -
我想，我应该多增加一些信息这一点。
如果您使用的应用程序的this.location.replaceState()路由器没有更新，因此，如果您使用路由器信息后，它不是在你的浏览器平等这一点。例如，如果您使用localizeService改变语言，之后切换语言应用程序返回到上一个网址，你在之前this.location.replaceState()改变它。
如果你不希望这种行为，你可以选择更新URL，就像不同的方法：
this.router.navigate(
[this.locationStrategy.path().split('?')[0]],
{queryParams: queryParamsObj}
);
在这个选项中您的浏览器还没有刷新，但你的URL变化也被注入到你的应用程序的Router，所以当你切换语言，你没有问题像this.location.replaceState()。
当然，你可以选择你需要的方法。首先是更轻，因为你不参与你的应用程序比在浏览器中改变URL更多。
对我来说，它实际上是两个有角4.4.5混合。
使用router.navigate保持通过不尊重realtiveTo破坏我的网址：activatedRoute一部分。
我已经结束了：
this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())