Access Parent @Component and vars from *Routed* Child Component : <p>I am trying to toggle a side nav menu, located at the top of my main App template using a button in a nested child component. I can't figure out how to get to the sidenav component in the parent to tell it to <code>sidenav.open()</code>. </p>

<p>I know about @Input and @Output on a child component, but as I understand it, to use this I need to have some sort of DOM tag for the child component to attach these to? Such as:</p>

<pre><code>&lt;app&gt;
  &lt;sidenav-component #sidenav&gt;...&lt;/sidenav-component&gt;

  &lt;child [someInput]="some_parent_var" (childOpensNav)="sidenav.open()"&gt;&lt;/child&gt;
&lt;/app&gt;
</code></pre>

<p>Tons of articles on how to do this. Problem is that I'm <em>routing</em> to this component so no <code>&lt;child&gt;</code> tag exists explicitly in the code. Rather my code is like this:</p>

<pre><code>&lt;app&gt;
  &lt;sidenav-component #sidenav&gt;...&lt;/sidenav-component&gt;

  &lt;router-outlet&gt;&lt;/router-outlet&gt;
&lt;/app&gt;
</code></pre>

<p>If I have a child component that gets routed to, how do I do a <code>sidenav.open()</code> or somehow access a component in the parent from the child? </p>

<p>Some thoughts: I've done some research and thinking about a couple of approaches and not sure if they are correct or would even work...One approach being using the Injector service and trying to traverse up to the parent, but this feels wrong:</p>

<pre><code>// child component
constructor(injector: Injector) {
  this.something = injector.parent.get(Something);
}
</code></pre>

<p>Or possibly creating a Service in the parent, somehow attached to the Sidenav component and then injecting this service into the child??</p>
