components communication through <router-outlet> : <p>I have a root component that has a changing boolean and I want to subscribe to that changing boolean, with a component within my <code>&lt;router-outlet&gt;</code>. I understand I need to use a shared bidirectional service of some sort. However, the docs for shared services just arent making a whole lot of sense to me. (I guess I cant wrap my head around the astronaut example) <a href="https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service" rel="noreferrer">here</a>, any help would be greatly appreciated, here is a little bit of code to show what I am trying to do.</p>

<p><strong>root component</strong></p>

<pre><code>@Component({
   selector: 'my-app',
   template: `&lt;nav [state]="boolshow"  (show)="changeValue($event)" &gt;&lt;/nav&gt; 
          &lt;article&gt;&lt;router-outlet&gt;&lt;/router-outlet&gt;&lt;/article&gt;  &lt;-----component in router here
          &lt;footer&gt;&lt;/footer&gt;
          &lt;h3&gt;toggle state: {{boolshow}}&lt;/h3&gt;`,
   styleUrls: ['./Css/app.css'],

   })
 export class AppComponent {
   boolshow: boolean;      &lt;-----boolean that needs to be read
  }
</code></pre>
