Angular 2: Route parameter changes, reload the same page?

问题

I have a route with a parameter, when going to the page /users/123 where 123 is the parameter the ngOnInit is called, I get my parameter and I call my method to get the user.

However, when I'm on that page and I click a second link /users/456 then the ngOnInit is not called anymore (because that page is already instantiated). So without ngOnInit I can't get the route parameter and can't call my method to get the user.

If I go to /users/123, then to /home, then to /users/456, it works obviously.

What do I have to use to make sure the function that gets the parameter and gets the user is ALWAYS called even if I'm already on the same page?

回答1:

You can use subscriber route.params to listen the param's change.

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

export class DemoPage {
    constructor(private _route: ActivatedRoute) { }
    ngOnInit() {
            this._route.params.forEach(params => {
                    let userId = params["userId"];
                    //call your function, like getUserInfo()
            })
    }
}

回答2:

Params is an Observable. So you only have to subscribe once to the observable and everytime the parameters change, you get notified.

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.params
    .switchMap((params: Params) => /* load your user e.g. getUser(params['id']) */)
    .subscribe(user => this.user = user);
}

You also need to import ActivatedRoute and Params

import { ActivatedRoute, Params } from '@angular/router';

回答3:

OnInit is invoked only once when the directive is instantiated.

For watch route params use ActivatedRoute.

constructor(private route: ActivatedRoute) { }

ngOnInit(): void {
    this.route.params.forEach((params: Params) => {
        console.log(params); // Your params called every change
    });
}

Don't forget to import:

import { ActivatedRoute, Params } from '@angular/router';

Read more about OnInit: OnInit - ts - API

Read more about ActivatedRoute: ActivatedRoute - ts - API

回答4:

Ok sorry guys, I was calling my get user outside of the activatedRoute callback.

This is correct:

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

export class DemoPage {
constructor(private _route: ActivatedRoute) { }
ngOnInit() {
        this._route.params.forEach(params => {
                let userId = params["userId"];
                getUserInfo(userId);
        });
    }
}

What I did was:

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

export class DemoPage {
constructor(private _route: ActivatedRoute) { }
ngOnInit() {
        var userId = "";
        this._route.params.forEach(params => {
            userId = params["userId"];                    
        });

        getUserInfo(userId)
    }
}

来源：https://stackoverflow.com/questions/41393095/angular-2-route-parameter-changes-reload-the-same-page

标签

angular

angular2-routing