web-dev-qa-db-fra.com

Exécution du code après router.navigate dans Angular2

Je me demande s'il existe un moyen d'exécuter quelque chose après avoir navigué vers une "vue" différente à l'aide d'un routeur angulaire.

this.router.navigate(["/search", "1", ""]);
// Everything after navigate does not not get executed.
this.sideFiltersService.discoverFilter(category);
8
Dave Plug

this.router.navigate renvoie une promesse pour que vous puissiez simplement utiliser:

this.router.navigate(["/search", "1", ""]).then(()=>{
  // do whatever you need after navigation succeeds
});

15
gabo bernal

Pas tout à fait sûr du contexte mais une option serait de vous abonner à une modification de l'URL en utilisant ActivatedRoute

https://angular.io/docs/ts/latest/guide/router.html#!#activated-route

Voici un exemple:

...
import { ActivatedRoute } from '@angular/router';
...

private _routerSubscription: any;

// Some class or service

constructor(private _route: ActivatedRoute){
    this._routerSubscription = this._route.url.subscribe(url => {
        // Your action/function will go here
    });
}

Il existe de nombreuses autres observables auxquelles vous pouvez vous abonner dans ActivatedRoute et qui sont répertoriées dans ce lien si l'URL ne vous convient pas vraiment.

L'abonnement peut être effectué dans la constructor() ou dans une ngOnInit(), selon ce qui vous convient le mieux. N'oubliez pas de nettoyer après vous et de vous désabonner dans une ngOnDestroy() :)

this._routerSubscription.unsubscribe();
2
Borquaye

Si vous naviguez de ComponentA à ComponentB, après la navigation, vous pouvez effectuer n'importe quelle action dans la fonction ngOnInit() de ComponentB, en fonction des paramètres passés dans l'itinéraire.

1
Ali Shahzad

Vous devez également vous assurer qu'il n'y a pas d'abonnement en cours ... J'ai rencontré le même problème et dans mon cas, un abonnement avait changé d'itinéraire. Donc, l'itinéraire a été changé deux fois. Mais en pratique, vous pouvez utiliser des promesses, ce qui est juste

0
Timothy