title: Get the url param from nested component
body: <p>I develop a MEAN stack application and for the Front-End I use Angular.
  In angular, I use a navbar and a sidenav bar which are the framework of my layout. Then the routes are displayed in the <strong>mat-sidenav-content -> ng-content</strong> here:</p>
  
  <p><strong>FRAMEWORK COMPONENT HTML</strong>
      </p>
  
  <pre><code>  &lt;nav class="navbar navbar-expand-lg navbar-dark bg-primary"&gt;
      MY CONTENT NAVBAR
    &lt;/nav&gt;
  
    &lt;mat-sidenav-container class="sidenav-container"&gt;
      &lt;mat-sidenav&gt;
      MY CONTENT SIDENAV
      &lt;/mat-sidenav&gt;
  
      &lt;mat-sidenav-content style="background-color: #ecf0f1"&gt;
        &lt;ng-content&gt;&lt;/ng-content&gt;
      &lt;/mat-sidenav-content&gt;
    &lt;/mat-sidenav-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The others components are displayed properly. However, I would like to access the url from the framework component like this:</p>
  
  <pre><code>       import { ActivatedRoute } from "@angular/router";
  [...]
          constructor(private route: ActivatedRoute) {}
  [...]
          this.route.snapshot.params["id"]
  </code></pre>
  
  <p>It doesn't work because it's undefined whereas if I do it in the other components it works. I think it is because the FRAMEWORK component is not defined in the router therefore there is not URL for this component.</p>
  
  <p>I tried to use a sharing data service. Like this I set the id value in the other component and the framework component can use it. But it doesn't work because Framework component is loaded before the other component.</p>