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

Question

J'ai mis à jour pour utiliser le nouveau Angulaire 2 routeur du routeur-déconseillé et certains comportement a changé.

La page que je vais avoir des problèmes avec, est une page de recherche. Nous avons choisi de mettre tous les termes de recherche dans l'URL à l'aide de l' HashLocationStrategy. Les routes ressembler à 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 une chaîne de requête approche pourrait être un meilleur ajustement pour toutes ces options, mais les exigences d'un projet décidé par d'autres personnes...

De toute façon si je navigue à l' localhost/#/search/Hello l'aide this.router.navigate(['/search/Hello']); alors que le routeur fonctionne très bien et tout est grand. Alors que sur la page si j'essaie d' this.router.navigate(['/search/World']); puis l'URL dans la barre d'adresse du navigateur mettra à jour en conséquence, mais ne change pas du tout.

Auparavant je pouvais utiliser routerCanReuse à indiquer que je ne veux réutiliser le composant de recherche et d' routerOnReuse permettrait de relancer la recherche lors de la navigation qui s'est passé. Je ne vois pas d'équivalent à ces en @angular/router. Comment puis-je recharger le trajet en cours avec de nouveaux paramètres d'URL?

Je suis en cours d'exécution de la version 2.0.0-rc.3 Angulaire 2 et 3.0.0-alpha.8 de @angulaire/routeur.

Answer 1

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