web-dev-qa-db-fra.com

Le routeur Navigate n’appelle pas ngOnInit lorsque la même page

J'appelle router.navigate sur la même page avec certains paramètres de chaîne de requête. Dans ce cas, ngOnInit() n'appelle pas. Est-ce par défaut ou dois-je ajouter quelque chose?

angularnavigateurlngoninit
52
Jeeten Parmar

Vous pouvez injecter le ActivatedRoute et vous abonner à params

constructor(route:ActivatedRoute) {
  route.params.subscribe(val => {
    // put the code from `ngOnInit` here
  });
}

Le routeur ne détruit et ne recrée le composant que lorsqu'il navigue vers un autre itinéraire. Lorsque seuls les paramètres de route ou de requête sont mis à jour alors que la route est identique, le composant ne sera ni détruit ni recréé.

Une autre façon de forcer la recréation du composant consiste à utiliser une stratégie de réutilisation personnalisée. Voir aussi Le routeur 2.0.0 angular2 ne recharge pas les composants lorsque la même URL est chargée avec des paramètres différents? (il ne semble pas y avoir beaucoup d'informations disponibles, mais comment les implémenter)

85
Günter Zöchbauer

Vous pouvez ajuster reuseStrategy sur le routeur.

constructor(private router: Router) {
    // override the route reuse strategy
    this.router.routeReuseStrategy.shouldReuseRoute = function() {
        return false;
    };
}
62
Pascal

Avez-vous probablement besoin d'une page de rechargement? Voici ma solution: j'ai changé mon @NgModule (dans le fichier app-routing.module.ts dans mon cas):

@NgModule({
  imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})] })
4
Dionis Oros

Ce problème provient probablement du fait que vous ne résiliez pas vos abonnements à l'aide de ngOnDestroy. Voici comment se faire faire.

  1. Importez l’abonnement suivant rxjs. import { Subscription } from 'rxjs/Subscription';

  2. Ajoutez OnDestory à votre Angular Core Import. import { Component, OnDestroy, OnInit } from '@angular/core';

  3. Ajoutez OnDestory à votre classe d'exportation. export class DisplayComponent implements OnInit, OnDestroy {

  4. Créez une propriété d'objet avec une valeur de Subscription from rxjs sous votre classe d'exportation pour chaque abonnement du composant. myVariable: Subscription;

  5. Définissez la valeur de votre abonnement sur MyVariable: Subscriptions. this.myVariable = this.rmanagerService.getRPDoc(books[i].books.id).subscribe(value => {});

  6. Ensuite, juste en dessous de ngOninit, placez le hook cycle de vie ngOnDestory () et insérez votre déclaration de désinscription pour votre abonnement. Si vous en avez plusieurs, ajoutez d'autres ngOnDestroy() { this.myVariable.unsubscribe(); }

1
Steve Klock

NgOnInit serait appelé une fois lors de la création d'une instance. Pour la même instance NgOnInit ne sera plus appelé. Pour l'appeler, il est nécessaire de détruire l'instance créée.

1
micronyks

Pensez à déplacer le code que vous aviez dans ngOnInit dans ngAfterViewInit. Ce dernier semble être appelé sur la navigation du routeur et devrait vous aider dans ce cas.

0
Manoj Amalraj