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 https://stackoverflow.com/questions/35688084/how-to-get-query-params-from-url-in-angular-2 — Jameel Moideen, Sep 25 '18 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, Sep 25 '18 at 20:23
Sorry, that was a mistype copying it in here. It is correct. Both match. See my update above. — Muirik, Sep 25 '18 at 20:25
your exact requirement is still not clear , now you got the parameters .What's the issue or what are you trying to achieve? — Jameel Moideen, Sep 25 '18 at 20:28
Meaning, all my param values I need are there in the url string. I just need to load them up when the component re-loads. Otherwise, previously made filter selections (which are params), are lost when re-load happens. — Muirik, Sep 25 '18 at 20:31
don't use url as `data-storage`, use `localStorage` or `sessionStorage` for that *and only url for preselecting ( to have a direct link for needed data) — un.spike, Sep 25 '18 at 20:33
@Muirik I have posted an answer , I am not sure that trick would help you — Jameel Moideen, Sep 25 '18 at 20:56

Jameel Moideen · Answer 1 · 2018-09-25T21:03:51.033

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 '18 at 21:03

answered Sep 25 '18 at 20:55

Jameel Moideen

7,542
12
51
79

Does the second part go within ngOnInit? – Muirik Sep 25 '18 at 20:59
@Muirik Yes. I will edit my answer with another approach also. Both will work – Jameel Moideen Sep 25 '18 at 21:02
You can test the same with setTimeOut . setTimeout(() => { this.redirectTo(this.router.url); }, 5000); – Jameel Moideen Sep 25 '18 at 21:06
Thanks, will give these a try in a little bit. The latter one looks preferable to me. – Muirik Sep 25 '18 at 21:24
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? – Muirik Sep 26 '18 at 00:37
@Muirik If that not works for you check this link please http://tech-blog.maddyzone.com/angularjs/javascript/how-reload-current-route-angular2 – Jameel Moideen Sep 26 '18 at 02:51

score 0 · Answer 2 · answered Sep 25 '18 at 19:49

0

Your loadData() can look like following:

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

answered Sep 25 '18 at 19:49

Peter Kim

1,929
14
22

score 0 · Answer 3 · answered Sep 25 '18 at 20:13

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 '18 at 20:13

un.spike

4,857
2
18
38

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

3 Answers3