我有两个并行指令(与父子一样),如果可能的话,我希望它们通过使用observable的服务进行通信。我已经阅读了official component interaction guidline,但它谈到了亲子互动。我尝试使用两个指令制作plunker,但它不起作用。
基本上,我想要的是创建服务:
export class DirService {
contentSource = new Subject();
content$ = this.contentSource.asObservable();
}
然后,使用此服务在<之间建立桥梁。 dir1>和< dir2>。有人能指出如何实施这个senerio?
不过,我选择使用observable主要是因为:谢谢!
答案 0 :(得分:5)
如果您将“共享”服务添加到每个组件的providers
@Component({
selector: 'dir2',
template: '{{field}}',
providers: [DirService]
})
然后为每个组件维护一个新实例。
要获得共享服务,您只能在bootstrap(AppComponent, [DirService])
中添加它,或者在组件和指令的一个共同祖先中添加它,以定义根组件和共享服务的范围。
这样每个后代都会获得相同的实例。
另见
- 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依赖注入。
有关详细信息,您可以查看以下问题: