J'utilise angular 2 avec une stratégie de hashlocation.

Le composant est chargé avec cette route:

"departments/:id/employees"

Jusqu'ici très bien.

Après avoir effectué une sauvegarde par lots réussie de plusieurs lignes de table modifiées, je veux recharger l'url de la route actuelle via:

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

Mais rien ne se passe, pourquoi?

Si votre navigateur () ne modifie pas l'URL déjà affichée dans la barre d'adresse de votre navigateur, le routeur n'a rien à faire. Ce n'est pas le travail du routeur de rafraîchir les données. Si vous souhaitez actualiser les données, créez un service injecté dans le composant et appelez la fonction de chargement sur le service. Si les nouvelles données seront récupérées, cela mettra à jour la vue via des liaisons.

Cela peut maintenant être fait dans Angular 5.1 en utilisant le onSameUrlNavigation propriété de la configuration du routeur.

J'ai ajouté un blog expliquant comment ici, mais l'essentiel est le suivant

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

Dans l' onSameUrlNavigationoption d' activation de la configuration de votre routeur , définissez-la sur 'reload'. Cela amène le routeur à déclencher un cycle d'événements lorsque vous essayez de naviguer vers une route déjà active.

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

Dans vos définitions d'itinéraire, définissez runGuardsAndResolverssur always. Cela indiquera au routeur de toujours lancer les cycles de gardes et de résolveurs, déclenchant les événements associés.

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

Enfin, dans chaque composant dont vous souhaitez activer le rechargement, vous devez gérer les événements. Cela peut être fait en important le routeur, en se liant aux événements et en invoquant une méthode d'initialisation qui réinitialise l'état de votre composant et récupère les données si nécessaire.

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

Avec toutes ces étapes en place, vous devriez avoir activé le rechargement d'itinéraire.

Créez une fonction dans le contrôleur qui redirige vers la route attendue comme ceci

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

puis utilise-le comme ça

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

cette fonction redirigera vers une route factice et retournera rapidement à la route de destination sans que l'utilisateur s'en rende compte.

ÉDITER

Pour les nouvelles versions d'Angular (5.1+), utilisez la réponse suggérée par @Simon McClive

Ancienne réponse

J'ai trouvé cette solution de contournement sur une demande de fonctionnalité GitHub pour 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);
    }
});

J'ai essayé d'ajouter cela à ma fonction app.component.ts ngOnInit , et cela a bien fonctionné. Tous les autres clics sur le même lien rechargent maintenant lecomponent données et.

Lien vers la demande de fonctionnalité GitHub d'origine

Le crédit revient à mihaicux2 sur GitHub.

J'ai testé ceci sur la version 4.0.0-rc.3avecimport { Router, NavigationEnd } from '@angular/router';

Peu compliqué: utilisez le même chemin avec des paramètres factices. Par exemple-

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

J'utilise celui-ci pour le projet Angular 9:

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

PS: testé et fonctionne également sur "Angular 7, 8"

Piratage de rechargement de routes angulaires 2-4

Pour moi, utiliser cette méthode à l'intérieur d'un composant racine (composant, qui est présent sur n'importe quelle route) fonctionne:

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

Cela fonctionne pour moi comme un charme

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

Sur la page de rechargement de changement de paramètre ne se produira pas. C'est vraiment une bonne fonctionnalité. Il n'est pas nécessaire de recharger la page mais nous devons changer la valeur du composant. La méthode paramChange appellera lors du changement d'URL. Nous pouvons donc mettre à jour les données des composants

/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) {

}

C'est ce que j'ai fait avec Angular 9 . Je ne suis pas sûr que cela fonctionne dans les anciennes versions.

Vous devrez l'appeler lorsque vous aurez besoin de recharger.

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

Le routeur forRoot doit avoir SameUrlNavigation défini sur `` recharger ''

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

Et chaque itinéraire doit avoir runGuardsAndResolvers défini sur `` toujours ''

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

Pour moi travaille en dur avec

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

Pour autant que je sache, cela ne peut pas être fait avec le routeur dans Angular 2. Mais vous pouvez simplement faire:

window.location.href = window.location.href

Pour recharger la vue.

Nous avons trouvé une solution rapide et simple qui ne nécessite pas de bricoler le fonctionnement interne de angular:

En gros: créez simplement un itinéraire alternatif avec le même module de destination et basculez simplement entre eux:

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

Et voici le menu à bascule:

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

J'espère que ça aide :)

Un peu hardcore mais

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

    this.router.onSameUrlNavigation = 'ignore';

});

Dans mon cas:

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

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

fonctionne correctement

implémenter OnInit et appeler ngOnInit () dans la méthode pour route.navigate ()

Voir un exemple:

export class Component implements OnInit {

  constructor() {   }

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

  ngOnInit () {

  }

Résolution d'un scénario similaire en utilisant un composant factice et une route pour reload, ce qui fait en fait un redirect. Cela ne couvre certainement pas tous les scénarios utilisateur, mais a simplement fonctionné pour mon scénario.

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

Le routage est câblé pour attraper toutes les URL à l'aide d'un caractère générique:

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

Pour l'utiliser, il suffit d'ajouter recharger l'url où nous voulons aller:

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

Il existe différentes approches pour actualiser l'itinéraire actuel

Changer le comportement du routeur (depuis Angular 5.1) Réglez les routeurs onSameUrlNavigation sur «recharger». Cela émettra les événements du routeur sur la même navigation URL.

• Vous pouvez ensuite les gérer en vous abonnant à un itinéraire
• Vous pouvez l'utiliser avec la combinaison de runGuardsAndResolvers pour réexécuter les résolveurs

Laissez le routeur intact

• Transmettez une actualisation queryParam avec l'horodatage actuel dans l'URL et abonnez-vous à queryParams dans votre composant acheminé.
• Utilisez l'événement activate de la sortie du routeur pour mettre la main sur le composant acheminé.

J'ai écrit une explication plus détaillée sous https://medium.com/@kevinkreuzer/refresh-current-route-in-angular-512a19d58f6e

J'espère que cela t'aides.

Supposons que la route du composant que vous souhaitez actualiser est view, puis utilisez ceci:

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

vous pouvez ajouter un debuggerà l'intérieur de la méthode pour savoir quel est l'itinéraire exact qui suivra après la navigation "departments/:id/employees".

Une solution est de passer un paramètre fictif (c'est-à-dire le temps en secondes), de cette façon le lien est toujours rechargé:

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

J'utilise setTimeoutetnavigationByUrl pour résoudre ce problème ... Et cela fonctionne très bien pour moi.

Il est redirigé vers une autre URL et revient à la place dans l'URL actuelle ...

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

Je crois que cela a été résolu (nativement) dans Angular 6+; vérifier

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

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

Mais cela fonctionne pour un itinéraire complet (comprend également tous les itinéraires pour enfants)

Si vous souhaitez cibler un seul composant, procédez comme suit: Utilisez un paramètre de requête qui change, afin de pouvoir naviguer autant de fois que vous le souhaitez.

Au point de navigation (classe)

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

Dans le composant que vous souhaitez "actualiser / recharger"

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

Très frustrant qu'Angular ne semble toujours pas inclure une bonne solution pour cela. J'ai soulevé un problème github ici: https://github.com/angular/angular/issues/31843

En attendant, c'est ma solution de contournement. Il s'appuie sur certaines des autres solutions suggérées ci-dessus, mais je pense que c'est un peu plus robuste. Il s'agit d'encapsuler le service Routeur dans un " ReloadRouter", qui prend en charge la fonctionnalité de rechargement et ajoute également unRELOAD_PLACEHOLDER à la configuration principale du routeur. Ceci est utilisé pour la navigation intermédiaire et évite de déclencher d'autres routes (ou gardes).

Remarque: utilisez uniquement le ReloadRouterdans ces cas où vous souhaitez la fonctionnalité de rechargement. Utilisez la normale Routerautrement.

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

Importer Routeret ActivatedRoutedepuis@angular/router

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

Injectez Routeret ActivatedRoute(au cas où vous auriez besoin de quelque chose de l'URL)

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

Obtenez n'importe quel paramètre si nécessaire à partir de l'URL.

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

Utiliser une astuce en naviguant vers une URL factice ou principale puis vers l'URL réelle actualisera le composant.

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

Dans ton cas

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

Si vous utilisez une route factice, vous verrez un titre clignotant «Not Found» si vous avez implémenté une URL non trouvée au cas où ne correspondrait à aucune URL.

s'abonner aux modifications des paramètres d'itinéraire

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

Si vous changez d'itinéraire via le lien du routeur, procédez comme suit:

  constructor(public routerNavigate: Router){

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

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

            if (evt instanceof NavigationEnd) {

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

Vous devez utiliser la propriété "onSameUrlNavigation" dans RouterModule, puis vous abonner aux événements Route https://blog.angularindepth.com/refresh-current-route-in-angular-512a19d58f6e

Décide quand la route doit être stockée retourne false à

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

et définissez la valeur de navigation du routeur sur false, ce qui montre que cette route n'a jamais été routée

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

J'ai essayé quelques correctifs et aucun d'entre eux ne fonctionne. Ma version est simple: ajoutez un nouveau paramètre inutilisé dans les paramètres de requête

            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

// utiliser le backtick pour délimiter la route

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