title: components communication through <router-outlet>
body: <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>