Using ActivatedRoute to Load Data on Return to a Component in Angular App

Question

I am trying to get my activatedRoute in my Angular app, so that I can load this within the onInit life cycle hook, so that when a user returns to a component, the component will load with the state of the url as they last left it.

I have already imported activatedRoute and am injecting it in the constructor:

constructor(private route: ActivatedRoute) {}

Then, in onOnit, just to see what I have, I tried this:

console.log('route info: ', this.route.queryParams);

What I get back is a behavior subject, so I try adding this:

console.log('route info: ', this.route.queryParams.toArray().subscribe());

This now returns a subscriber.

Bottom line, what I want is to be able to capture the current url/query string, and load it up within ngOnInit. Something like this:

ngOnInit() {
  this.loadData();
}

loadData() {
  this.route.queryParams;
}

Does this look close? How can I actually get the component to use activatedRoute to load up what's in the url/query string?

UPDATE: After a suggestion below, I'm thinking it could look something like this?

ngOnInit() {
    this.loadData();
}

loadData() {
    let currentRoute = this.route.params.subscribe(params => {
        // logic goes here
        console.log(params['firstName']);
        return params;
      });
    this.router.navigate([currentRoute]);
}

UPDATE 2:

If I do this:

ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
      });
}

I get this back in the console:

{pn_firstName.e: "1", pn_firstName.v: "John"}

And this is what my url/query string looks like:

http://localhost:4200/consulting;pn_firstName.e=1;pn_firstName.v=John

So it does seem to be getting the query string from what I can see in the console.

So, bottom line, will this load up the current state of the url/query string when the component loads?

ngOnInit() {
    let currentRoute = this.activatedRoute.params.subscribe((params: Params) => {
        let myParams = params;
        console.log(myParams);
        return myParams;
    });
    this.router.navigate([currentRoute]);
}

Apparently, not, because this is what I get for the url when loading the component:

http://localhost:4200/consulting;closed=false;_parent=null;_parents=null;_subscriptions=%5Bobject%20Object%5D;syncErrorValue=null;syncErrorThrown=false;syncErrorThrowable=false;isStopped=false;destination=%5Bobject%20Object%5D

possible duplicate of stackoverflow.com/questions/35688084/… — Jameel Moideen
– Jameel Moideen, Commented Sep 25, 2018 at 19:59
I can see you are getting the right query parameters , only difference is string ''pn_" is appending with every parameters is that's your pblm?? — Jameel Moideen
– Jameel Moideen, Commented Sep 25, 2018 at 20:23

Jameel Moideen · Accepted Answer · 2018-09-25 21:03:51Z

1

If you are looking something to reload the current route without loosing the parameters you can try the below strategy

On your component constructor

constructor(private router:Router){
    this.router.routeReuseStrategy.shouldReuseRoute = function(){
            return false;
     } }

And reload to the same route you are currently in. From the URL property you will get the entire url

this.router.navigated = false;
      this.router.navigate([this.router.url]);

Another Approach

create a method

redirectTo(uri) {
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() =>
    this.router.navigate([uri]));
  }

And call the same like below

 this.redirectTo(this.router.url);

edited Sep 25, 2018 at 21:03

answered Sep 25, 2018 at 20:55

Jameel Moideen

8,00913 gold badges54 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Muirik Over a year ago

Does the second part go within ngOnInit?

Jameel Moideen Over a year ago

@Muirik Yes. I will edit my answer with another approach also. Both will work

Jameel Moideen Over a year ago

You can test the same with setTimeOut . setTimeout(() => { this.redirectTo(this.router.url); }, 5000);

Muirik Over a year ago

Thanks, will give these a try in a little bit. The latter one looks preferable to me.

Muirik Over a year ago

So, I tried the second approach, and it appears to put the app is some sort of infinite loop. The page never loads fully. I defined redirectTo(uri) just as you described here, and then called this.redirectTo(this.router.uri) from within ngOnInit(). As an aside, when I run console.log(this.router.url) the correct url logs to the console. Is there some sort of security issue preventing the app from loading with this method? Some problem with how this relates to our routes?

|

Peter Kim · Accepted Answer · 2018-09-25 19:49:45Z

0

Your loadData() can look like following:

this.route.params.subscribe(params => {
  // logic goes here
  console.log(params['id']); // example 
});

answered Sep 25, 2018 at 19:49

Peter Kim

1,99715 silver badges24 bronze badges

Comments

un.spike · Accepted Answer · 2018-09-25 20:13:44Z

0

You can use snapshot for route

this.route.snapshot - if you don't wanna to use subscriber as this.route.params.subscribe

same for queryParams - it's accessible via snapshot

answered Sep 25, 2018 at 20:13

un.spike

5,1533 gold badges23 silver badges43 bronze badges

Collectives™ on Stack Overflow

Using ActivatedRoute to Load Data on Return to a Component in Angular App

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related