Altere os parâmetros da rota sem recarregar no Angular 2

Estou criando um site de imobiliária usando Angular 2, Google Maps, etc. e quando um usuário muda o centro do mapa, eu faço uma pesquisa na API indicando a posição atual do mapa, bem como o raio. O fato é que desejo refletir esses valores no url sem recarregar a página inteira. Isso é possível? Eu encontrei algumas soluções usando o AngularJS 1.x, mas nada sobre o Angular 2.

Você poderia usar o location.go(url)que basicamente mudaria seu url, sem alterar a rota de aplicação.

OBSERVAÇÃO, isso pode causar outros efeitos, como redirecionar para a rota secundária a partir da rota atual.

A questão relacionada que descrevelocation.gonão sugereRouterque ocorram mudanças.

A partir do RC6, você pode fazer o seguinte para alterar o URL sem alterar o estado e, assim, manter seu histórico de rota

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

Usar location.go(url)é o caminho a seguir, mas em vez de codificar o url, considere gerá-lo usando router.createUrlTree().

Visto que você deseja fazer a seguinte chamada de roteador: this.router.navigate([{param: 1}], {relativeTo: this.activatedRoute})mas sem recarregar o componente, ele pode ser reescrito como:

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

 this.location.go(url);

Para qualquer pessoa como eu, encontrar esta questão pode ser útil.

Tive um problema semelhante e tentei inicialmente usar location.go e location.replaceState conforme sugerido em outras respostas aqui. No entanto, tive problemas quando tive que navegar para outra página no aplicativo porque a navegação era relativa à rota atual e a rota atual não estava sendo atualizada por location.go ou location.replaceState (o roteador não sabe de nada sobre o que eles fazem ao URL)

Em essência, eu precisava de uma solução que NÃO recarregasse a página / componente quando o parâmetro da rota mudasse, mas atualizasse o estado da rota internamente.

Acabei usando parâmetros de consulta. Você pode encontrar mais sobre isso aqui: https://angular-2-training-book.rangle.io/handout/routing/query_params.html

Portanto, se você precisar fazer algo como salvar um pedido e obter um ID do pedido, pode atualizar o URL da página conforme mostrado abaixo. Atualizar um local central e dados relacionados em um mapa seria semelhante

// 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.
}

e você acompanha isso dentro do método ngOnInit como:

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]
}

Se precisar ir direto para a página do pedido com um novo pedido (não salvo), você pode:

this.router.navigate(['orders']);

Ou, se precisar ir direto para a página de pedido de um pedido existente (salvo), você pode fazer:

this.router.navigate(['orders'], { queryParams: { id: '1234' } });

Tive grandes problemas para fazer isso funcionar nas versões RCx do angular2. O pacote Location foi movido e a execução de location.go () dentro de constructor () não funcionará. Ele precisa ser ngOnInit () ou posterior no ciclo de vida. Aqui está um exemplo de código:

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

Aqui estão os recursos angulares sobre o assunto: https://angular.io/docs/ts/latest/api/common/index/Location-class.html https://angular.io/docs/ts/latest/api/ common / index / LocationStrategy-class.html

Eu uso esta maneira de obtê-lo:

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()
);

- EDITAR -

Acho que devo acrescentar mais algumas informações para isso.

Se você usa o this.location.replaceState()roteador do seu aplicativo não está atualizado, então se você usar as informações do roteador posteriormente não é igual para isso no seu navegador. Por exemplo, se você usar localizeServicepara alterar o idioma, depois de alterar o idioma, seu aplicativo de volta para a última URL onde você estava antes, altere-o com this.location.replaceState().

Se você não quiser esse comportamento, pode escolher um método diferente para atualizar o URL, como:

this.router.navigate(
  [this.locationStrategy.path().split('?')[0]],
  {queryParams: queryParamsObj}
);

Nesta opção, seu navegador também não atualiza, mas sua URLalteração também é injetada em Routerseu aplicativo, portanto, quando você muda de idioma, não tem problemas como em this.location.replaceState().

Claro, você pode escolher o método de acordo com suas necessidades. O primeiro é mais leve porque você não envolve mais seu aplicativo do que muda o URLnavegador.

Para mim, foi na verdade uma mistura de ambos com o Angular 4.4.5.

O uso de router.navigate destruía meu url por não respeitar a parte realtiveTo: enabledRoute.

Acabei com:

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

Use o atributo queryParamsHandling: 'merge' ao alterar o url.

this.router.navigate([], {
        queryParams: this.queryParams,
        queryParamsHandling: 'merge',
        replaceUrl: true,
});