在 Angular2 中的 router.navigate 之后执行代码

Question

I wonder if there is a way to execute something after i navigate to a different "view" using angular router.

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

Answer 1

this.router.navigate returns a promise so you can simply use:

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

Answer 2

Not entirely sure of the context but an option would be to subscribe to a change in the URL using ActivatedRoute

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

Here's an example:

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

There are many other observables you can subscribe to in ActivatedRoute which are listed in that link if url isn't quite what you need.

The subscription can be done in the constructor() or in an ngOnInit() depending on what suits you best, just remember to clean up after yourself and unsubscribe in an ngOnDestroy() :)

this._routerSubscription.unsubscribe();

Answer 3

// In javascript
this.router.navigate(["/search", "1", ""])
    .then(succeeded => {
        if(succeeded)
        {
            // Do your stuff
        }
        else
        {
            // Do some other stuff
        }
    })
    .catch(error => {
        // Handle the error
    });

// In typescript you can use the javascript example as well.
// But you can also do:
try
{
    let succeeded = await this.router.navigate(["/search", "1", ""]);
    if(succeeded)
    {
        // Do your stuff
    }
    else
    {
        // Do some other stuff
    }
}
catch(error)
{
    // Handle the error
}

Answer 4

如果您是从导航ComponentA到ComponentB导航，你可以做任何行动之后再ngOnInit()的函数ComponentB ，取决于在路由传递的参数。

Answer 5

You also have to ensure that there are no ongoing subscriptions... I faced the same problem and in my case there was a subscription which changed route. So the route has been changed twice. But practically you can use promises, thats right