Escribí una directiva personalizada que uso en mi aplicación Angular 2 para cerrar paneles de contenido (algunos titulares de contenido en mi plantilla) en todos los diferentes componentes de mi aplicación Angular 2. Como este código es bastante similar para cada componente, pensé que tendría sentido escribir una directiva que pudiera definir una vez y usar en todos los componentes. Así es como se ve mi directiva:

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

@Directive({
    selector: '[myCloseContentPanel]'
})

export class CloseContentPanelDirective {
    private el: HTMLElement;

    constructor(el: ElementRef) {
        this.el = el.nativeElement;
    }

    @HostListener('click') onMouseClick() {
        this.el.style.display = 'none';
    }
}

Ahora esperaba poder importar esta directiva una vez en un componente principal de app.component, y que luego podría usar esta directiva en todos los componentes secundarios. Lamentablemente, esto no funciona, por lo que tendría que importar esta directiva en cada componente por separado. ¿Estoy haciendo algo mal? ¿O este comportamiento simplemente no es posible?