CODEWITHSUNDEEP
angularangular2-routing
user4149157
user4149157

Reputation:

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?

Upvotes: 9

Views: 14673

Answers (5)

A.T Rayan
A.T Rayan

Reputation: 169

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

Upvotes: 0

DGD
DGD

Reputation: 143

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

Upvotes: 6

user4149157
user4149157

Reputation:

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

Upvotes: 0

Jarek
Jarek

Reputation: 987

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

Upvotes: 0

Lon Yang
Lon Yang

Reputation: 696

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

Upvotes: 14

Related Questions