Angular 2 Component Interaction via a service

Question

I have two parallel directives (as apposed to parent-child) and I want them to communicate via a service using observable if possible. I've read the official component interaction guidline, but it talks about parent-child interaction. I tried to make a plunker with two directives but it doesn't work.

Basically, what I want is to create a service:

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

And then, use this service to make a bridge between < dir1 > and < dir2 >. Could someone point out how to implement this senerio?

Btw, I choose to use observable mainly because:

I read the post in this thread.
If I want many directives to communicate, I guess observable could make the logic more clear.

Thanks!

score 5 · Accepted Answer · edited May 23 '17 at 12:34

5

If you add the "shared" service to providers of each component

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

then for each component a new instance is maintained.

To get a shared service you either add it only in bootstrap(AppComponent, [DirService]) or one common ancestor of the components and directives that defines the root component and the scope of the shared service.
This way every descendant gets the same instance.

Plunker example

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

edited May 23 '17 at 12:34

Community

1
1

answered Mar 31 '16 at 08:44

Günter Zöchbauer

623,577
216
2,003
1,567

1

thx! And here is a working [plunker](http://plnkr.co/edit/5PQ9AmbfNVDHfWIW54mN?p=preview) using common ancestor based on you advice. – lys1030 Mar 31 '16 at 21:05
1

Well said! Thanks! – Vishal Sakaria Jul 28 '16 at 13:39

score 1 · Answer 2 · edited May 23 '17 at 11:46

You need to specify the DirService service when bootstrapping your application:

bootstrap(AppComponent, [ DirService ]);

And remove it from component providers attribute:

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

This way you will share the same instance of the service for the whole application (and both components).

See this plunkr: http://plnkr.co/edit/rYq3iicbd4mKGyxHlJmg?p=preview.

This behavior is linked to the "hierarchical injectors" of Angular2 dependency injection.

For more details, you could have a look at this question:

What's the best way to inject one service into another in angular 2 (Beta)?

Angular 2 Component Interaction via a service

2 Answers2