Angular 2可观察的订阅未触发 [英] Angular 2 observable subscription not triggering

问题描述

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

I have an issue with a subscription to an observable not triggering.

我使用侧面导航布局指令进行布局，如下所示:

I have a layout using the side nav layout directive looking like this:

<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>

我需要做的是从路由器插座显示的组件中打开侧面导航.

What I need to do is open the side nav from the component that the router-outlet is displaying.

一个这样的组件可能看起来像这样:

One such component might look like this:

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

}

我创建了一个返回可观察到的服务的服务:

I have created a service that returns an observable like this:

@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):

Finally the code for the parent class (that belongs with the side nav layout 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组件中的订阅(路由器出口显示的内容)会按预期触发.

Now my problem is that the subscription in the App component does not trigger, however, the subscription in the Home component (which is what the router-outlet displays) is triggered as expected.

我在这里想念东西吗?

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

推荐答案

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

The same service instance isn't being shared across your App and Home components because you have listed SidenavService as a provider for both.

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

When you define service provider in the providers entry of a Component decorator, that service is then available to that component and all of its children as a singleton, meaning the same instance of the service will be used.

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

If you redefine a provider in a child component, it will create a new instance of the service and will no longer share the same service instance as its parent/ancestor.

如果您同时在App和Home组件中使用SidenavService，并且需要相同的实例，则应仅在App组件中提供它，并将其从Home的providers条目中删除.

If you are using SidenavService in both App and Home components and need the same instance, you should only provide it in the App component and remove it from the providers entry of Home.

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

For more information on DI, have a read of the following links: https://angular.io/docs/ts/latest/guide/dependency-injection.html https://angular.io/docs/ts/latest/guide/hierarchical-dependency-injection.html

这篇关于Angular 2可观察的订阅未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！