Ich habe eine benutzerdefinierte Anweisung geschrieben, die ich in meiner Angular 2-Anwendung verwende, um Inhaltsfenster (einige Inhaltshalter in meiner Vorlage) in allen verschiedenen Komponenten meiner Angular 2-Anwendung zu schließen. Da dieser Code für jede Komponente ziemlich gleich ist, hielt ich es für sinnvoll, eine Direktive zu schreiben, die ich einmal definieren und in allen Komponenten verwenden könnte. So sieht meine Direktive aus:

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

Now Ich habe erwartet, dass ich diese Direktive einmal in eine übergeordnete Komponente von app.component importieren und dann diese Direktive in allen untergeordneten Komponenten verwenden kann. Das funktioniert leider nicht, daher müsste ich diese Direktive in jede Komponente separat importieren. Mache ich etwas falsch? Oder ist dieses Verhalten einfach nicht möglich?