Как прослушивать события дочерних элементов в директиве?

Question

Поскольку нет шаблона, какой способ прослушать дочерние элементы в директиве? Можно ли с HostListener? Если нет, есть ли другой способ?

Существует также аналогичный вопрос: How to listen for child event from parent directive in Angular2, но предлагаемый подход не решает мою проблему, так как моя директива и дочерний элемент не находятся в одном шаблоне (директива находится на хосте).

Cheers!

Редактировать # 1

Это, как я сейчас делаю это (там должен быть лучший способ):

Первый инъекционного ElementRef в моей директиве:

constructor(private elView: ElementRef) {} 

Затем связывание с jQuery (или простой JS):

$(this.elView.nativeElement) 
.on('drag', '#childId', this.slide.bind(this)) 

Answer 1

Если событие, которое вы хотите слушать является уроженцем события DOM, что пузыри, то вы можете просто использовать @HostListener()

@HostListener('click', ['$event']) 
handleClick(event) { 
    // handle event 
} 

Если они являются выходами дочерних компонентов, вы можете запросить их и подписаться на их выходы

@ContentChildren(ChildComponent) children:QueryList<ChildComponent>; 

ngAfterContentInit() { 
    this.children.toArray().forEach((item) => { 
    item.someOutput.subscribe(...); 
    }); 
} 

или вы можете использовать подход, используемый в ответе, на который вы ссылаетесь в своем вопросе.

Answer 2

Возможно, вы захотите, чтобы ваши компоненты взаимодействовали друг с другом через сервис-класс.

// service class 
class Service { 
    private someEventSource = new Subject(); 
    public someEvent = this.someEventSource.asObservable(); 

    public invokeAnEvent (data: string) { 
    this.someEventSource.next(data); 
    } 
} 

// parentComponent class 
Service.someEvent.subscribe(data => { 
    console.log(data); 
}); 

// childComponent class 
Service.invokeAnEvent('some data to pass'); 

С угловыми документации:
https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service