我有一个使用侧面导航布局指令的布局,如下所示：

<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");
    }
 
}

我创建了一个返回像这样的observable的服务：

@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组件中的订阅不会触发,但Home组件中的订阅(路由器插座显示的内容)会按预期触发.

我在这里错过了什么吗？

我按照本指南：@L_403_0@