Angular 2 可观察订阅未触发 [英] Angular 2 observable subscription not triggering
问题描述
我在订阅未触发的 observable 时遇到问题.
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 组件中的订阅(这是 router-outlet 显示的内容)按预期触发.
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.
我在这里遗漏了什么吗?
Am I missing something here?
我遵循了本指南:https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service
推荐答案
同一服务实例不会在您的 App 和 Home 组件之间共享，因为您已将 SidenavService 列为两者的提供者.
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.
如果您在子组件中重新定义提供者，它将创建一个新服务实例，并且不再与其父/祖先共享相同的服务实例.
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 组件中提供它，并从 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.htmlhttps://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屋！
