title: Using ActivatedRoute to Load Data on Return to a Component in Angular App
body: <p>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. </p>
  
  <p>I have already imported activatedRoute and am injecting it in the constructor:</p>
  
  <pre><code>constructor(private route: ActivatedRoute) {}
  </code></pre>
  
  <p>Then, in onOnit, just to see what I have, I tried this:</p>
  
  <p>console.log('route info: ', this.route.queryParams);</p>
  
  <p>What I get back is a <code>behavior subject</code>, so I try adding this:</p>
  
  <pre><code>console.log('route info: ', this.route.queryParams.toArray().subscribe());
  </code></pre>
  
  <p>This now returns a <code>subscriber</code>.</p>
  
  <p>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:</p>
  
  <pre><code>ngOnInit() {
    this.loadData();
  }
  
  loadData() {
    this.route.queryParams;
  }
  </code></pre>
  
  <p>Does this look close? How can I actually get the component to use activatedRoute to load up what's in the url/query string?</p>
  
  <p>UPDATE: After a suggestion below, I'm thinking it could look something like this?</p>
  
  <pre><code>ngOnInit() {
      this.loadData();
  }
  
  loadData() {
      let currentRoute = this.route.params.subscribe(params =&gt; {
          // logic goes here
          console.log(params['firstName']);
          return params;
        });
      this.router.navigate([currentRoute]);
  }
  </code></pre>
  
  <p>UPDATE 2:</p>
  
  <p>If I do this:</p>
  
  <pre><code>ngOnInit() {
      this.activatedRoute.params.subscribe((params: Params) =&gt; {
          let myParams = params;
          console.log(myParams);
        });
  }
  </code></pre>
  
  <p>I get this back in the console:</p>
  
  <pre><code>{pn_firstName.e: "1", pn_firstName.v: "John"}
  </code></pre>
  
  <p>And this is what my url/query string looks like:</p>
  
  <pre><code>http://localhost:4200/consulting;pn_firstName.e=1;pn_firstName.v=John
  </code></pre>
  
  <p>So it does seem to be getting the query string from what I can see in the console.</p>
  
  <p>So, bottom line, will this load up the current state of the url/query string when the component loads?</p>
  
  <pre><code>ngOnInit() {
      let currentRoute = this.activatedRoute.params.subscribe((params: Params) =&gt; {
          let myParams = params;
          console.log(myParams);
          return myParams;
      });
      this.router.navigate([currentRoute]);
  }
  </code></pre>
  
  <p>Apparently, not, because this is what I get for the url when loading the component:</p>
  
  <pre><code>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
  </code></pre>