Angular 2 可观察订阅未触发

Question

我对订阅未触发的可观察对象有疑问。

我有一个使用侧边导航布局指令的布局，如下所示:

<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 组件中的订阅没有触发，但是 Home 组件中的订阅(这是路由器导出显示的)按预期触发。

我是不是漏掉了什么？

我遵循了这个指南:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Answer 1

同一服务实例未在您的 App 和 Home 组件之间共享，因为您已将 SidenavService 列为两者的提供者。

当您在组件装饰器的 providers 条目中定义服务提供者时，该服务随后可用于该组件及其所有子组件作为单例，这意味着该服务的相同实例将是用过。

如果您在子组件中重新定义一个提供者，它将创建一个新服务实例，并且将不再与其父/祖先共享同一个服务实例。

如果您在 App 和 Home 组件中使用 SidenavService 并且需要相同的实例，您应该只在 App 组件中提供它并从 providers 条目中删除它家的。

有关 DI 的更多信息，请阅读以下链接: https://angular.io/docs/ts/latest/guide/dependency-injection.html https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html