web-dev-qa-db-fra.com

Naviguer vers le même itinéraire sans actualiser le composant?

J'ai mis à niveau pour utiliser le nouveau Angular 2 routeur de routeur obsolète et certains comportements ont changé.

La page qui me pose problème est une page de recherche. Nous avons choisi de mettre tous les termes de recherche dans l'URL à l'aide de HashLocationStrategy. Les itinéraires ressemblent à ceci:

const routes: RouterConfig = [
  { path: '', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size/:more', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort/:size', component: HomeComponent },
  { path: 'search/:term/:cat/:page/:sort', component: HomeComponent },
  { path: 'search/:term/:cat/:page', component: HomeComponent },
  { path: 'search/:term/:cat', component: HomeComponent },
  { path: 'search/:term', component: HomeComponent },
  { path: 'details/:accountNumber', component: DetailsComponent }
];

Je sais qu'une approche de chaîne de requête conviendrait peut-être mieux à toutes ces options, mais les exigences du projet décidées par d'autres personnes ...

Quoi qu'il en soit, si je navigue vers localhost/#/search/Hello En utilisant this.router.navigate(['/search/Hello']);, alors le routeur fonctionne correctement et tout est génial. Tandis que sur cette page si j'essaie de this.router.navigate(['/search/World']);, l'URL dans la barre d'adresse du navigateur se mettra à jour en conséquence, mais le composant ne change pas du tout.

Auparavant, je pouvais utiliser routerCanReuse pour indiquer que je souhaitais réutiliser le composant de recherche et que routerOnReuse relancerait la recherche lorsque la navigation serait effectuée. Je ne vois pas d'équivalent à ceux-ci dans @angular/router. Comment recharger l'itinéraire actuel avec les nouveaux paramètres d'URL?

J'utilise la version 2.0.0-rc.3 pour Angular 2 et 3.0.0-alpha.8 de @ angular/router.

angularangular2-routing
43
Corey Ogburn

Si seuls les paramètres ont changé, le composant lui-même ne sera pas initialisé à nouveau. Mais vous pouvez vous abonner aux modifications des paramètres que vous envoyez.

Par exemple, sur la méthode ngOnInit, vous pouvez faire quelque chose comme ceci:

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       const term = params['term'];
       this.service.get(term).then(result => { console.log(result); });
     });
  }
50
Doron Brikman