更改路線參數，無需重新加載角2 2

Question

我正在製作一個房地產網站使用角2，谷歌地圖等，當用戶更改地圖的中心時，我執行搜索api，指出當前位置地圖以及半徑。事情是，我想在URL中反映這些值，而無需重新加載整個頁面。那可能嗎？我發現了一些使用AngularJS 1.x的解決方案，但沒有任何關於角度2.

Answer 1

你可以使用location.go(url)這將基本上改變你的網址，而不會改變應用程序的路線。

NOTE this could cause other effect like redirect to child route from the current route.

Related question描述location.go不會貼心Router發生變化。

Answer 2

我在使用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

Answer 3

由於RC6你可以做以下更改URL沒有改變狀態，從而保持您的路線歷史

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.replaceState("/some/newstate/"); 
    } 
} 

Answer 4

對於像我這樣的人發現這個問題，以下可能會有用。

我有一個類似的問題，最初嘗試使用location.go和location.replaceState在這裏的其他答案建議。然而，當我不得不導航到應用程序中的另一個頁面時，我遇到了問題，因爲導航是相對於當前路線的，並且當前路線沒有被location.go或location.replaceState更新（路由器不知道任何東西這些對URL做了什麼）

實質上，我需要一個解決方案，當路由參數改變但DID在內部更新路由狀態時，DID不會重載頁面/組件。

我結束了使用查詢參數。你可以在這裏找到更多關於它的信息：https://angular-2-training-book.rangle.io/handout/routing/query_params.html

所以，如果你需要做點保存訂單和獲取訂單ID，你可以更新你的頁面URL，如下所示。在地圖上更新中心位置和相關數據將類似

// 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' } }); 

Answer 5

使用location.go(url)是要走的路，但不要自己構建URL！使用router.createUrlTree()。

想象一下，您在您的頁面上有此導航：this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})但現在您不希望重新加載組件，只想設置URL上的參數。這可以通過連載的URL來實現：

const url = this 
     .router 
     .createUrlTree([{param: 1}], {relativeTo: this.activatedRoute}) 
     .toString(); 

this.location.go(url); 

Answer 6

對我來說，它實際上是兩個有角4.4.5混合。

使用router.navigate通過不尊重realtiveTo：activatedRoute部分而不斷破壞我的網址。

我已經結束了：

this._location.go(this._router.createUrlTree([this._router.url], { queryParams: { profile: value.id } }).toString())