Я написал пользовательскую директиву, которую я использую в своем приложении Angular 2 для закрытия панелей содержимого (некоторые держатели содержимого в моем шаблоне) во всех различных компонентах моего приложения Angular 2. Поскольку этот код совершенно одинаков для каждого компонента, я подумал, что было бы целесообразно написать директиву, которую я мог бы определить один раз, и использовать во всех компонентах. Вот как выглядит моя директива:

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';
    }
}

Теперь я ожидал, что смогу импортировать эту директиву один раз в родительский компонент app.component и что затем смогу использовать эту директиву во всех дочерних компонентах. К сожалению, это не работает, поэтому мне придется импортировать эту директиву в каждый компонент отдельно. Я делаю что-то неправильно? Или это поведение просто невозможно?