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