title: How to access the URL parameters from any Angular component?
body: <p>I have an app whose components are structured as below:</p>
  
  <pre><code>1. Fam.Component
  1.1. Header.Component &lt;------ Unable access param from here
  1.2. ParentGrid.Component
  1.2.1. ChildGrid.Component
  1.2.1.1 GrandChildGrid.Component &lt;----- Can access from here!!
  </code></pre>
  
  <p>Clicking on an item in the parent grid, will load the child grid relevant to that item. </p>
  
  <p>At the grand child level, my browser URL looks something like this:</p>
  
  <pre><code>http://onebigfamily.com/Fam/Parents/1/Children/23/GrandChildren
  </code></pre>
  
  <p>this will basically show all the grandchildren for the 23rd Child of the 1st parent.</p>
  
  <p>the path for this URL in my routing config looks is like this:</p>
  
  <pre><code>Fam/Parents/:parentId/Children/childId:/GrandChildren
  </code></pre>
  
  <p>I can access the <code>childId</code> and <code>parentId</code> param values by navigating the <code>ActivatedRoute</code> from my <code>GrandChildren</code> component by doing a simple <code>this.route.snapshot.params['childId']</code> (of course for parent ID have to traverse up the route tree).</p>
  
  <p><strong>Now to the question...</strong></p>
  
  <p>How can I access the <code>:childId</code> and <code>:parentId</code> from my Header Component? these values are showing up as undefined when i do a <code>this.route.snapshot.params['childId']</code>?</p>
  
  <p>I just need to access the parent ID and the child ID as long as they are in the URL, regardless of which component has the control.</p>