title: Angular router get child param from root component
body: <p>I have this structure in my <code>app.component.html</code>:</p>
  
  <pre><code>&lt;app-main-nav&gt;&lt;/app-main-nav&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>This is my routes:</p>
  
  <pre><code>const routes = [
    {path: "", redirectTo: "home", pathMatch: "full"},
    {
      path: "posts", component: PostsComponent, 
      children: [{
        path: ":id",
        component: PostComponent
      }];
    }
  ]
  </code></pre>
  
  <p>I am trying to access the <strong>params</strong> from the <code>PostComponent</code> page in my <code>MaiNavComponent</code> but it throws an error.</p>
  
  <pre><code>export class MainNavComponent implements OnInit {
  
    constructor( private route: ActivatedRoute) {
      route.params.subscribe(console.log)
    }
  }
  </code></pre>
  
  <p>How can I get the <code>:id</code> of the <code>PostComponent</code> from the <code>MainNavComponent</code>? </p>
  
  <p>I tried to do this:</p>
  
  <pre><code> route.params.subscribe(console.log)
  </code></pre>
  
  <p>Here I get an <strong>empty</strong> object.</p>
  
  <p>And this:</p>
  
  <pre><code> route.firstChild.params.subscribe(console.log)
  </code></pre>
  
  <blockquote>
    <p>Cannot read property 'params' of null</p>
  </blockquote>