Angular 2：路由参数更改，重新加载同一页面？答案

【问题标题】：Angular 2: Route parameter changes, reload the same page?Angular 2：路由参数更改，重新加载同一页面？
【发布时间】：2017-05-14 13:39:52
【问题描述】：

我有一个带参数的路由，当转到 /users/123 页面时，其中 123 是调用 ngOnInit 的参数，我得到我的参数并调用我的方法来获取用户。

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

如果我转到 /users/123，然后转到 /home，然后转到 /users/456，它显然有效。

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

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

在我的情况下，这个解决方案非常完美：

this.ActiveRout.paramMap.subscribe(param => { DOCTYPE : number;

    this.DOCTYPE = + param.get('DocType');

  ` and in my page i want to input value to be change by DOCTYPE value that will call 
    the DocsTypeServ to return the name of DOCUMENT TYPE BY ID (DOCTYPE)`

   this.DocsTypeServ.readByID(this.DOCTYPE).subscribe((data: CDocsType[]) => {
     this.DocumentType_Value = (data.find(x => x.ID == this.DOCTYPE).NAME).toString();
   }
   );
})

【讨论】：

【解决方案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';

【讨论】：

【解决方案3】：

好的，抱歉，我在 ActivatedRoute 回调之外调用了我的 get 用户。

这是正确的：

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

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

我所做的是：

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

【讨论】：

【解决方案4】：

OnInit 仅在指令实例化时调用一次。

对于观看路线参数，请使用ActivatedRoute。

constructor(private route: ActivatedRoute) { }

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

别忘了导入：

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

阅读更多关于 OnInit 的信息：OnInit - ts - API

阅读更多关于ActivatedRoute：ActivatedRoute - ts - API

【讨论】：

【解决方案5】：

您可以使用订阅者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()
            })
    }
}

【讨论】：