Угловое взаимодействие между компонентами через службу

Question

У меня есть две параллельные директивы (как для родительского-родителя), и я хочу, чтобы они обменивались данными через службу с помощью наблюдаемого, если это возможно. Я читал official component interaction guidline, но он говорит о взаимодействии между родителями и дочерними элементами. Я попытался сделать plunker с двумя директивами, но он не работает.

В общем, что я хочу, чтобы создать службу:

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

И затем, использовать эту услугу, чтобы сделать мост между < dir1> и < dir2>. Может ли кто-нибудь указать, как реализовать это senerio?

Btw, я выбираю использовать наблюдаемые в основном потому, что:

• Я прочитал post в this thread.
• Если я хочу, чтобы многие директивы связывались, я предполагаю, что наблюдаемые могут сделать логику более ясной.

Спасибо!

Answer 1

Если добавить "общий" сервис 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?

Answer 2

Вы должны указать DirService службу при развернув приложение:

bootstrap(AppComponent, [ DirService ]); 

и удалить его из компонентов атрибута провайдеров:

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

Таким образом, вы будете одни и те же экземпляр службы для все приложение (и оба компонента).

Посмотрите это plunkr: http://plnkr.co/edit/rYq3iicbd4mKGyxHlJmg?p=preview.

Это поведение связано с «иерархическими форсунками» инъекции зависимостей Angular2.

Для получения более подробной информации, вы могли бы посмотреть на этот вопрос:

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