9

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?

Improve this question

5 Answers 5

Reset to default
14

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()
            })
    }
}
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

6

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';
Improve this answer

Comments

0

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

Improve this answer

Comments

0

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)
    }
}
Improve this answer

Comments

0

this solution in my case is worked perfect :

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.