components communication through <router-outlet>

Question

I have a root component that has a changing boolean and I want to subscribe to that changing boolean, with a component within my <router-outlet>. 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) here, any help would be greatly appreciated, here is a little bit of code to show what I am trying to do.

root component

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

   })
 export class AppComponent {
   boolshow: boolean;      <-----boolean that needs to be read
  }

Answer 1

It's exactly how they say in that Angular2 Docs :

• Create a Service with an Observable

• Inject the same Service in both components

• From one component you update the data to the Service

• From the other component you read the data from the Service

Ex.

The Service :

@Injectable()
export class DataService {
    private dataObs$ = new Subject();

    getData() {
        return this.dataObs$;
    }

    updateData(data: boolean) {
        this.dataObs$.next(data);
    }
}

The Components :

@Component({
  selector: 'my-app',
  template: `<div (click)="updateData(false)">Click t oupdate Data FALSE</div>
             <div (click)="updateData(true)">Click to update Data TRUE</div>
            <child></child>
            `
})
export class AppComponent {
    constructor(private dataService: DataService) {}

    updateData(value: boolean) {
      this.dataService.updateData(value);
    }
}


@Component({
  selector: 'child',
  template: `<div><p>data from Service HERE:</p><p style="color:red"> {{myData}}</p></div>`
})
export class ChildComponent {
    myData: boolean;

    constructor(private dataService: DataService) {}

    ngOnInit() {
      this.dataService.getData().subscribe(data => {
        this.myData = data;
      })
    }
}

Make sure to have the same Service injected in the components (Singleton):

@NgModule({
  imports:      [ BrowserModule, HttpModule ],
  declarations: [ AppComponent, ChildComponent ],
  providers: [ DataService ],
  bootstrap:    [ AppComponent ]
})

A full working example can be found HERE : http://plnkr.co/edit/nJVC36y5TIGoXEfTkIp9?p=preview

PS: This is how the communication via Service works in Angular2, it doesn't matter if your component is inside a router-outlet via a router, it works everywhere.