How to access any of the element under a directive and add events?

问题

Here is my directive:

import { Directive, HostListener, ElementRef, Renderer, Input } from '@angular/core';

@Directive({
  selector: '[carouselDirective]'
})
export class CarouselDirective {

    @Input() carouselDirective:any;

    constructor( private el : ElementRef, private renderer: Renderer ) { 
        console.log(el.nativeElement); //how to add the click / hover events to it's childrens?
    }

    @HostListener('click') onClick() {
        window.alert("onClick");
    }

    @HostListener('mouseover') onHover() {
        window.alert("hover");
    }

}

My question is :

1. how to add any of the events to any of the children of my directive? ( on event i require to add and remove some class names )
2. how to communicate with his parent component?
3. how to get some value from parent component and manipulate in directive?
4. can't I add remove class name to child elements?
5. on click of child element can't i change property of parent element?
6. if there is 5 element under a parent to add events to them, required to create separate 5 directive(s"?

来源：https://stackoverflow.com/questions/50088002/how-to-access-any-of-the-element-under-a-directive-and-add-events