So stellen Sie Direktiven und Komponenten global zur Verfügung

Question

Ich habe eine benutzerdefinierte Anweisung geschrieben, die ich in meiner Angular 2-Anwendung zum Schließen von Inhaltsfenstern (einige Inhaltshalter in meiner Vorlage) in allen verschiedenen Komponenten meiner Angular 2-Anwendung verwendet. Da dieser Code für jede Komponente ziemlich gleich ist, dachte ich, dass es sinnvoll wäre, eine Direktive zu schreiben, die ich einmal definieren und in allen Komponenten verwenden könnte. Dies ist, was meine Richtlinie wie folgt aussieht:

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

Nun erwartete ich, dass ich diese Richtlinie einmal in einer app.component Elternkomponente importieren könnte, und dass ich dann diese Richtlinie durch alle untergeordneten Komponenten verwenden könnte. Dies funktioniert leider nicht, daher müsste ich diese Anweisung in jede Komponente separat importieren. Mache ich etwas falsch? Oder ist dieses Verhalten einfach nicht möglich?

Answer 1

update> = RC.5

Sie haben ein Modul in importieren, was auch immer Sie wollen Modul Komponenten, Richtlinien oder Rohre des importierten Modul verwenden. Es gibt keinen Weg darum herum.

Was können Sie tun, ist es, ein Modul zu erstellen, die mehrere andere Module (zum Beispiel exportiert, die BrowserModule die CommonModule.

@NgModule({ 
    declarations: [CoolComponent, CoolDirective, CoolPipe], 
    imports: [MySharedModule1, MySharedModule2], 
    exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe], 
}) 
export class AllInOneModule {} 

@NgModule({ 
    imports: [AllInOneModule] 
}) 
class MyModule {} 

diese Weise können Sie alles von AllInOneModule zur Verfügung MyModule exportiert machen exportiert.

Siehe auch https://angular.io/docs/ts/latest/guide/ngmodule.html

Update < = RC.5

bootstrap(AppComponent, [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})]); 

Kommentare Siehe unten - obwohl pro Style Guide providers in der Wurzelkomponente über boostrap() begünstigt werden sollte, dies nicht funktioniert:

original

Auf der Wurzelkomponente add

@Component({ 
    selector: 'my-app', 
    providers: [provide(PLATFORM_DIRECTIVES, {useValue: [CloseContentPanelDirective], multi: true})], 
    templat: `...` 
}) 
export component AppComponent { 
} 

@Component(), @Directive(), @Pipe() enthalten bereits @Injectable(). Keine Notwendigkeit, es dort auch hinzuzufügen.