Angular 2 наблюдаемых подписки не запускаются

У меня есть проблема с подпиской на наблюдаемое не срабатывание.

У меня есть макет, используя директиву side nav layout, которая выглядит так:

<md-sidenav-layout class="nav-bar">


    <md-sidenav #start>
        <nav>
            <a [routerLink]="['/home']">Home</a>
        </nav> 
        <button md-button (click)="start.close()">Close</button>
    </md-sidenav>

    <router-outlet></router-outlet>

</md-sidenav-layout>

Что мне нужно сделать, так это открыть боковой навигатор из компонента, отображаемого маршрутизатором.

Один из таких компонентов может выглядеть так:

@Component({

    providers: [SidenavService, MdIconRegistry],
    directives: [MdIcon],
    templateUrl: `<md-icon (click)="toggleSidenav()">menu</md-icon>`,
    styleUrls: ["./home.component.scss"]
})

export class Home {

    myColor: string;

    constructor(private sidenavService: SidenavService) {
        this.myColor = "primary";

        this.sidenavService.getSidenavObs().subscribe(state => {console.log("state change")});
    }


    toggleSidenav() {

        this.sidenavService.toggleSidenav("open");
    }

}

Я создал службу, которая возвращает видимый вид:

@Injectable()
export class SidenavService {

    private toggle = new Subject<string>();
    private toggleObs = this.toggle.asObservable();

    getSidenavObs() {
        return this.toggleObs;
    }

    toggleSidenav(state: string) {
        this.toggle.next(state);
    }

}

Наконец, код для родительского класса (который принадлежит боковому макету HTML):

@Component({
  providers: [MdSidenav, SidenavService],
  directives: [ROUTER_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MD_BUTTON_DIRECTIVES],
  selector: "app",
  templateUrl: "app.html",
  styleUrls: ["./app.scss"],
})

export class App {

  subscription: Subscription;

  constructor(private sidenavService: SidenavService, private sidenav: MdSidenav) {
    this.subscription = sidenavService.getSidenavObs().subscribe( status => {
      console.log("state change");
      sidenav.open();
    }, error => {
      console.log(error);
    }, () => {
      console.log("completed");
    });
  }
}

Теперь моя проблема заключается в том, что подписка в компоненте App не запускается, однако подписка в домашнем компоненте (который отображается на дисплее маршрутизатора) запускается, как ожидалось.

Я что-то пропустил?

Я последовал этому руководству: https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service