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

Question

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?

Answer 1

Vous pouvez injecter de l' ActivatedRoute et vous abonner params

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

Le routeur seulement détruit et recrée le composant lorsqu'il accède à une autre route. Lorsque seul paramètre de route ou de la requête params sont mis à jour, mais la route est le même, le composant ne sera pas détruit et recréé.

Une autre façon de forcer le composant à être recréé est d'utiliser un custom stratégie de réutilisation. Voir aussi Angular2 routeur 2.0.0 pas des composantes de rechargement quand même url chargés avec des paramètres différents? (il ne semble pas être beaucoup d'informations disponibles, mais comment la mettre en œuvre)

Answer 2

Vous pouvez ajuster reuseStrategy sur le routeur.

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

Answer 3

Peut-être avez-vous réellement 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'})] })
 

Answer 4

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

Answer 5

Ce problème est probablement venir du fait que vous n'êtes pas la résiliation de vos abonnements à l'aide de ngOnDestroy. Voici comment obtenir'ter fait.

1. Apporter dans la suite de rxjs abonnement à l'importation. import { Subscription } from 'rxjs/Subscription';

2. Ajouter OnDestory à votre Angulaire de Base à l'Importation. import { Component, OnDestroy, OnInit } from '@angular/core';

3. Ajouter OnDestory à l'exportation de la classe. export class DisplayComponent implements OnInit, OnDestroy {

4. Créer une propriété de l'objet avec une valeur d'Abonnement, de rxjs en vertu de l'exportation de la classe pour chaque abonnement sur le composant. myVariable: Subscription;

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

6. Ensuite, juste en dessous de ngOninit lieu le ngOnDestory() cycle de vie de crochet et de le mettre dans votre désabonnement déclaration de votre abonnement. Si vous avez plusieurs, ajouter plus de ngOnDestroy() { this.myVariable.unsubscribe(); }