角度2组件通过服务进行交互

时间:2016-03-31 08:41:13

标签: angularjs angular rxjs observable angular-directive

我有两个并行指令(与父子一样),如果可能的话,我希望它们通过使用observable的服务进行通信。我已经阅读了official component interaction guidline,但它谈到了亲子互动。我尝试使用两个指令制作plunker,但它不起作用。

基本上,我想要的是创建服务:

export class DirService {
   contentSource = new Subject();
   content$ = this.contentSource.asObservable();
}

然后,使用此服务在<之间建立桥梁。 dir1>和< dir2>。有人能指出如何实施这个senerio?

不过,我选择使用observable主要是因为:

  • 我在post中阅读了this thread
  • 如果我想要许多指令进行交流,我认为可观察可以使逻辑更清晰。

谢谢!

2 个答案:

答案 0 :(得分:5)

如果您将“共享”服务添加到每个组件的providers

@Component({
    selector: 'dir2',
    template: '{{field}}',
    providers: [DirService]
})

然后为每个组件维护一个新实例。

要获得共享服务,您只能在bootstrap(AppComponent, [DirService])中添加它,或者在组件和指令的一个共同祖先中添加它,以定义根组件和共享服务的范围。
这样每个后代都会获得相同的实例。

Plunker example

另见
- AngularJs 2 - multiple instance of service created
- How to use Dependency Injection (DI) correctly in Angular2?

答案 1 :(得分:1)

您需要在引导应用程序时指定DirService服务:

bootstrap(AppComponent, [ DirService ]);

并将其从组件提供程序属性中删除:

@Component({
  (...)
  //providers: [ DirService ]
})

这样,您将为整个应用程序(以及两个组件)共享相同的服务实例。

请参阅此plunkr:http://plnkr.co/edit/rYq3iicbd4mKGyxHlJmg?p=preview

此行为与"分层注射器"相关联。 Angular2依赖注入。

有关详细信息,您可以查看以下问题: