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';

Answer 3

var param = { IdentityPoolId: "us-east-1:the-full-identity-id", Logins: {} // To have provider name in a variable }; param.Logins["com.test.website.login"] = userIdICreatedAndStoredInDynamoDB; cognitoidentity.getOpenIdTokenForDeveloperIdentity(param, function(err, data) { if (err) return fn(err); // an error occurred else fn(null, data.IdentityId, data.Token); // successful response });仅在实例化指令时调用一次。

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

ActivatedRoute

不要忘记导入：

constructor(private route: ActivatedRoute) { }

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

详细了解OnInit：OnInit - ts - API

详细了解ActivatedRoute：ActivatedRoute - ts - API

Answer 4

好的抱歉，伙计们，我在激活的路由回调之外调用了我的获取用户。

这是正确的：

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

Answer 5

在我看来，这种解决方案非常完美：

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

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

5 个答案: