Estou usando o angular 2 com estratégia de hashlocation.

O componente é carregado com essa rota:

"departments/:id/employees"

Até agora tudo bem.

Depois de salvar em lote com êxito várias linhas da tabela editada, desejo recarregar o URL da rota atual via:

this.router.navigate([`departments/${this.id}/employees`]);

Mas nada acontece, por quê?

Se o seu navegador () não alterar o URL que já é mostrado na barra de endereços do seu navegador, o roteador não terá nada para fazer. Não é tarefa do roteador atualizar os dados. Se você deseja atualizar os dados, crie um serviço injetado no componente e chame a função de carregamento no serviço. Se os novos dados forem recuperados, ele atualizará a visualização por meio de ligações.

Agora isso pode ser feito no Angular 5.1 usando a onSameUrlNavigationpropriedade de configuração do roteador.

Eu adicionei um blog explicando como aqui, mas a essência é a seguinte

https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Na onSameUrlNavigationopção de configuração do roteador , defina-a como 'reload'. Isso faz com que o roteador inicie um ciclo de eventos quando você tenta navegar para uma rota que já está ativa.

@ngModule({
 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
 exports: [RouterModule],
 })

Nas definições de rota, defina runGuardsAndResolverscomo always. Isso instruirá o roteador a sempre iniciar os ciclos de guardas e resolvedores, disparando eventos associados.

export const routes: Routes = [
 {
   path: 'invites',
   component: InviteComponent,
   children: [
     {
       path: '',
       loadChildren: './pages/invites/invites.module#InvitesModule',
     },
   ],
   canActivate: [AuthenticationGuard],
   runGuardsAndResolvers: 'always',
 }
]

Finalmente, em cada componente que você deseja ativar o recarregamento, você precisa manipular os eventos. Isso pode ser feito importando o roteador, vinculando-se aos eventos e chamando um método de inicialização que redefine o estado do seu componente e busca novamente os dados, se necessário.

export class InviteComponent implements OnInit, OnDestroy {
 navigationSubscription;     

 constructor(
   // … your declarations here
   private router: Router,
 ) {
   // subscribe to the router events. Store the subscription so we can
   // unsubscribe later.
   this.navigationSubscription = this.router.events.subscribe((e: any) => {
     // If it is a NavigationEnd event re-initalise the component
     if (e instanceof NavigationEnd) {
       this.initialiseInvites();
     }
   });
 }

 initialiseInvites() {
   // Set default values and re-fetch any data you need.
 }

 ngOnDestroy() {
   if (this.navigationSubscription) {
     this.navigationSubscription.unsubscribe();
   }
 }
}

Com todas essas etapas, você deve ter o recarregamento de rota ativado.

Crie uma função no controlador que redirecione para a rota esperada da seguinte maneira

redirectTo(uri:string){
   this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
   this.router.navigate([uri]));
}

então use-o assim

this.redirectTo('//place your uri here');

essa função será redirecionada para uma rota fictícia e retornará rapidamente à rota de destino sem que o usuário perceba.

EDITAR

Para versões mais recentes do Angular (5.1+), use a resposta sugerida por @Simon McClive

Resposta antiga

Encontrei esta solução alternativa em uma solicitação de recurso do GitHub para Angular:

this._router.routeReuseStrategy.shouldReuseRoute = function(){
    return false;
};

this._router.events.subscribe((evt) => {
    if (evt instanceof NavigationEnd) {
        this._router.navigated = false;
        window.scrollTo(0, 0);
    }
});

Tentei adicionar isso à minha função app.component.ts ngOnInit e com certeza funcionou. Todos os cliques adicionais no mesmo link agora recarregam os componentdados e.

Link para solicitação de recurso original do GitHub

O crédito vai para mihaicux2 no GitHub.

Eu testei isso na versão 4.0.0-rc.3comimport { Router, NavigationEnd } from '@angular/router';

Pouco complicado: use o mesmo caminho com alguns parâmetros fictícios. Por exemplo-

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

Estou usando este para o projeto Angular 9:

reloadCurrentRoute() {
    let currentUrl = this.router.url;
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([currentUrl]);
    });
}

PS: Testado e funciona também em "Angular 7, 8"

Corte de recarga de rota angular 2-4

Para mim, usar esse método dentro de um componente raiz (componente presente em qualquer rota) funciona:

onRefresh() {
  this.router.routeReuseStrategy.shouldReuseRoute = function(){return false;};

  let currentUrl = this.router.url + '?';

  this.router.navigateByUrl(currentUrl)
    .then(() => {
      this.router.navigated = false;
      this.router.navigate([this.router.url]);
    });
  }

Isso funciona para mim como um encanto

this.router.navigateByUrl('/', {skipLocationChange: true}).then(()=>
this.router.navigate([<route>]));

Na mudança de parâmetros, a página de recarga não acontecerá. Este é realmente um bom recurso. Não há necessidade de recarregar a página, mas devemos alterar o valor do componente. O método paramChange chamará a alteração de URL. Para que possamos atualizar os dados do componente

/product/: id / details

import { ActivatedRoute, Params, Router } from ‘@angular/router’;

export class ProductDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute, private router: Router) {
    this.route.params.subscribe(params => {
        this.paramsChange(params.id);
    });
}

// Call this method on page change

ngOnInit() {

}

// Call this method on change of the param
paramsChange(id) {

}

Foi o que fiz com o Angular 9 . Não tenho certeza se isso funciona em versões mais antigas.

Você precisará ligar para isso quando precisar recarregar.

 this.router.navigate([], {
    skipLocationChange: true,
    queryParamsHandling: 'merge' //== if you need to keep queryParams
  })

O roteador forRoot precisa ter o SameUrlNavigation definido como 'recarregar'

 RouterModule.forRoot(appRoutes, {
  // ..
  onSameUrlNavigation: 'reload',
  // ..
})

E todas as suas rotas precisam ter runGuardsAndResolvers definido como 'always'

{
    path: '',
    data: {},
    runGuardsAndResolvers: 'always'
},

Para mim, trabalha com codificação

this.router.routeReuseStrategy.shouldReuseRoute = function() {
    return false;
    // or
    return true;
};

Tanto quanto sei, isso não pode ser feito com o roteador no Angular 2. Mas você pode simplesmente fazer:

window.location.href = window.location.href

Para recarregar a exibição.

Encontrou uma solução rápida e direta que não requer mexer com o funcionamento interno da angular:

Basicamente: basta criar uma rota alternativa com o mesmo módulo de destino e alternar entre eles:

const routes: Routes = [
  {
    path: 'gesuch',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  },
  {
    path: 'gesuch-neu',
    loadChildren: './sections/gesuch/gesuch.module#GesuchModule'
  }
];

E aqui o menu de alternância:

<ul class="navigation">
    <li routerLink="/gesuch-neu" *ngIf="'gesuch' === getSection()">Gesuch</li>
    <li routerLink="/gesuch" *ngIf="'gesuch' !== getSection()">Gesuch</li>
</ul>

Espero que ajude :)

Um pouco hardcore, mas

this.router.onSameUrlNavigation = 'reload';
this.router.navigateByUrl(this.router.url).then(() => {

    this.router.onSameUrlNavigation = 'ignore';

});

No meu caso:

const navigationExtras: NavigationExtras = {
    queryParams: { 'param': val }
};

this.router.navigate([], navigationExtras);

trabalho correto

implemente OnInit e chame ngOnInit () no método route.navigate ()

Veja um exemplo:

export class Component implements OnInit {

  constructor() {   }

  refresh() {
    this.router.navigate(['same-route-here']);
    this.ngOnInit();   }

  ngOnInit () {

  }

Resolveu um cenário semelhante usando um componente fictício e rota para reload, o que realmente faz a redirect. Definitivamente, isso não cobre todos os cenários de usuário, mas apenas funcionou para o meu cenário.

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { Http } from '@angular/http';

@Component({
  selector: 'reload',
  template: `
    <h1>Reloading...</h1>
  `,
})
export class ReloadComponent implements OnInit{
  constructor(private router: Router, private route: ActivatedRoute) {
  }

  ngOnInit() {
    const url = this.route.snapshot.pathFromRoot.pop().url.map(u => u.path).join('/');
    this.router.navigateByUrl(url);
  }
}

O roteamento é conectado para capturar todos os URLs usando um curinga:

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { LoginViewComponent } from './views/login/login.component';
import { HomeViewComponent } from './views/home/home.component';
import { ReloadComponent } from './views/reload/reload.component';

@NgModule({
  declarations: [ 
    LoginViewComponent, HomeViewComponent, ReloadComponent
  ],
  imports: [
    RouterModule.forRoot([
      { path: 'login', component: LoginViewComponent },
      { path: 'home', component: HomeViewComponent },
      { 
        path: 'reload',
        children: [{
          path: '**',
          component: ReloadComponent 
        }]
      },
      { path: '**', redirectTo: 'login'}
    ])
  ],
  exports: [
    RouterModule,
  ],
  providers: [],

})
export class AppRoutingModule {}

Para usar isso, basta adicionar recarregar ao URL para onde queremos ir:

  this.router.navigateByUrl('reload/some/route/again/fresh', {skipLocationChange: true})

Existem diferentes abordagens para atualizar a rota atual

Alterar o comportamento do roteador (Desde o Angular 5.1) Defina os roteadores onSameUrlNavigation como 'recarregar'. Isso emitirá os eventos do roteador na mesma navegação por URL.

• Você pode lidar com eles assinando uma rota
• Você pode usá-lo com a combinação de runGuardsAndResolvers para executar novamente os resolvedores

Deixe o roteador intocado

• Passe uma queryParam de atualização com o carimbo de data / hora atual na URL e assine queryParams no seu componente roteado.
• Use o evento ativar da tomada do roteador para obter o componente roteado.

Escrevi uma explicação mais detalhada em https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

Espero que isto ajude.

Suponha que a rota do componente que você deseja atualizar seja viewe use o seguinte:

this.router.routeReuseStrategy.shouldReuseRoute = function (future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
  if (future.url.toString() === 'view' && curr.url.toString() === future.url.toString()) {
    return false;
  }
  return (future.routeConfig === curr.routeConfig);
}; 

você pode adicionar um debuggermétodo interno para saber qual é a rota exata depois de navegar para "departments/:id/employees".

Uma solução é passar um parâmetro fictício (ou seja, o tempo em segundos), dessa maneira o link é sempre recarregado:

this.router.navigate(["/url", {myRealData: RealData, dummyData: (new Date).getTime()}])

Estou usando setTimeoute navigationByUrlpara resolver esse problema ... E está funcionando bem para mim.

Ele é redirecionado para outro URL e, em vez disso, volta novamente ao URL atual ...

 setTimeout(() => {
     this.router.navigateByUrl('/dashboard', {skipLocationChange: false}).then(() =>
           this.router.navigate([route]));
     }, 500)

Eu acredito que isso foi resolvido (nativamente) no Angular 6+; Verifica

• aqui https://github.com/angular/angular/issues/13831 &&

• e aqui https://medium.com/engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2

Mas isso funciona para uma rota inteira (inclui também todas as rotas secundárias)

Se você deseja segmentar um único componente, veja como: Use um parâmetro de consulta que seja alterado para poder navegar quantas vezes quiser.

No ponto de navegação (classe)

   this.router.navigate(['/route'], {
        queryParams: { 'refresh': Date.now() }
    });

No componente que você deseja "atualizar / recarregar"

// . . . Component Class Body

  $_route$: Subscription;
  constructor (private _route: ActivatedRoute) {}

  ngOnInit() {
    this.$_route$ = this._route.queryParams.subscribe(params => {
      if (params['refresh']) {
         // Do Something
         // Could be calling this.ngOnInit() PS: I Strongly advise against this
      }

    });
  }

  ngOnDestroy() {
    // Always unsubscribe to prevent memory leak and unexpected behavior
    this.$_route$.unsubscribe();
  }

// . . . End of Component Class Body

Muito frustrante que o Angular ainda não pareça incluir uma boa solução para isso. Eu levantei um problema no github aqui: https://github.com/angular/angular/issues/31843

Enquanto isso, essa é minha solução alternativa. Ele se baseia em algumas das outras soluções sugeridas acima, mas acho que é um pouco mais robusto. Envolve agrupar o serviço Roteador em um " ReloadRouter", que cuida da funcionalidade de recarregamento e também adiciona um RELOAD_PLACEHOLDERà configuração do roteador principal. Isso é usado para a navegação provisória e evita o acionamento de outras rotas (ou guardas).

Nota: Use somente ReloadRouternesses casos quando desejar a funcionalidade recarregar. Use o normal Routercaso contrário.

import { Injectable } from '@angular/core';
import { NavigationExtras, Router } from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class ReloadRouter {
  constructor(public readonly router: Router) {
    router.config.unshift({ path: 'RELOAD_PLACEHOLDER' });
  }

  public navigate(commands: any[], extras?: NavigationExtras): Promise<boolean> {
    return this.router
      .navigateByUrl('/RELOAD_PLACEHOLDER', {skipLocationChange: true})
      .then(() => this.router.navigate(commands, extras));
  }
}

Importar Routere ActivatedRoutede@angular/router

import { ActivatedRoute, Router } from '@angular/router';

Injetar Routere ActivatedRoute(caso você precise de algo do URL)

constructor(
    private router: Router,
    private route: ActivatedRoute,
) {}

Obtenha qualquer parâmetro, se necessário, a partir do URL.

const appointmentId = this.route.snapshot.paramMap.get('appointmentIdentifier');

Usar um truque navegando para um URL fictício ou principal e depois para o URL real atualizará o componente.

this.router.navigateByUrl('/appointments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`appointment/${appointmentId}`])
});

No seu caso

const id= this.route.snapshot.paramMap.get('id');
this.router.navigateByUrl('/departments', { skipLocationChange: true }).then(() => {
    this.router.navigate([`departments/${id}/employees`]);
});

Se você usar uma rota fictícia, verá um título piscando 'Não encontrado' se tiver implementado um URL não encontrado, caso não corresponda a nenhum URL.

assinar alterações de parâmetro de rota

    // parent param listener ie: "/:id"
    this.route.params.subscribe(params => {
        // do something on parent param change
        let parent_id = params['id']; // set slug
    });

    // child param listener ie: "/:id/:id"
    this.route.firstChild.params.subscribe(params => {
        // do something on child param change
        let child_id = params['id'];
    });

Se você estiver alterando a rota via Link do roteador, siga este procedimento:

  constructor(public routerNavigate: Router){

         this.router.routeReuseStrategy.shouldReuseRoute = function () {
            return false;
          };

          this.router.events.subscribe((evt) => {

            if (evt instanceof NavigationEnd) {

                this.router.navigated = false;
             }
          })
      }

Você deve usar a propriedade "onSameUrlNavigation" no RouterModule e assinar os eventos de rota https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Decide quando a rota deve ser armazenada, retorne false para

this.router.routeReuseStrategy.shouldReuseRoute = function () {
    return false;
};

e defina o valor navegado do roteador como false, que mostra que essa rota nunca foi roteada

this.mySubscription = this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        this.router.navigated = false;
    }
});

Eu tentei algumas correções e nenhuma delas funciona. Minha versão é simples: adicione um novo parâmetro não utilizado aos parâmetros de consulta

            if (force) {
                let key = 'time';

                while (key in filter) {
                    key = '_' + key;
                }

                filter[key] = Date.now();
            }

            this.router.navigate(['.', { filter: JSON.stringify(filter) }]);

window.location.replace

// use backtick para incluir a rota

window.location.replace ( departments/${this.id}/employees)