1
votes

Appeler la fonction à la fin de Router.navigate

Je souhaite appeler une certaine fonction après la connexion d'un utilisateur. L'utilisateur peut se connecter à partir de n'importe quelle page et après une connexion réussie, l'utilisateur est redirigé vers la page précédente qu'il parcourait.

I ' m en utilisant Router.navigate pour rediriger vers la page.

Après avoir cherché un moment, NavigationEnd semble être une option qui fonctionnerait, mais elle s'applique à tous les événements du routeur, pas seulement un événement spécifique.

Mon login.component.ts a quelque chose comme ceci:

this.router.navigate([this.returnUrl])
  .then(this.doSomething()); // or .pipe()

angular

0 commentaires

4 Réponses :

0
votes

Vous voudrez probablement envisager d'utiliser une sorte d ' événements de cycle de vie . Vous pouvez soit effectuez un OnDestroy dans le composant à partir duquel vous naviguez. Ou un OnInit dans le composant dans lequel vous naviguez également.

1 commentaires

Cela peut avoir lieu de n'importe quel composant à n'importe quel autre composant. Je ne veux pas ajouter la fonction dans chaque composant pour cela.

0
votes

Je pense que la chose la plus simple est d'écouter simplement l'événement NavigationEnd comme vous l'avez mentionné, mais arrêtez d'écouter une fois que cela se produit.

this.authenticationService.login(this.credentials)
  .pipe(first())
  .subscribe(
    data => {
      this.router.navigate([this.returnUrl]);
      this.router.events.pipe(
        first(evt => evt instanceof NavigationEnd)
      ).subscribe(() => {
        this.doSomething(); 
      });
    },
    error => {
      // Implement error handling
    });

Je pense que c'est le chose correcte et sûre à faire parce que vous savez que:

Il y aura un événement NavigationEnd à venir
Ce sera l'événement approprié pour déclencher votre code
Après cela, vous pouvez arrêter d'écouter

0 commentaires

0
votes

Et ça?

this.router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
        if(event.url === "your-route") {
            //do your thing
        }
    }
});

0 commentaires

2
votes

Vous pouvez naviguer en utilisant .navigateByUrl () a > qui renvoie une promesse.

this.router.navigateByUrl(this.returnUrl).then(this.doSomething());

1 commentaires

Parfait pour mon cas d'utilisation! Vous avez manqué cela dans la documentation de l'API.