Angular 2:Route参数更改,重新加载同一页面？

Question

我有一个带参数的路由,当进入页面/ users/123时,123是调用ngOnInit的参数,我得到我的参数,我调用我的方法来获取用户.

但是,当我在该页面上并单击第二个链接/ users/456时,不再调用ngOnInit(因为该页面已经实例化).因此,如果没有ngOnInit,我无法获取route参数,也无法调用我的方法来获取用户.

如果我转到/ users/123,然后转到/ home,然后转到/ users/456,它显然可行.

即使我已经在同一页面上,我还必须使用什么来确保获取参数并获取用户的函数始终被调用？

Answer 1

您可以使用订阅者route.params来监听参数的更改.

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()
            })
    }
} 

Answer 2

Params是一个Observable.因此,您只需要订阅一次observable,每次参数更改时,都会收到通知.

constructor(private route: ActivatedRoute) {}

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

您还需要导入ActivatedRoute和Params

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