Come rendere le direttive e i componenti disponibili globalmente

Question

Ho scritto una direttiva personalizzata che utilizzo nell'applicazione Angular 2 per chiudere i pannelli di contenuto (alcuni supporti di contenuti nel mio modello) in tutti i diversi componenti dell'applicazione Angular 2. Dato che questo codice è lo stesso per ogni componente, ho pensato che avrei avuto senso scrivere una direttiva che potrei definire una sola volta e usarla in tutti i componenti. Questo è ciò che la mia direttiva appare come:

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

Ora mi aspettavo che avrei potuto importare questa direttiva, una volta in un componente genitore app.component, e che ho poi potuto utilizzare questa direttiva in tutte le componenti figlio. Purtroppo non funziona, quindi dovrei importare separatamente questa direttiva in ciascun componente. Sto facendo qualcosa di sbagliato? O questo comportamento semplicemente non è possibile?

Answer 1

aggiornamento> = RC.5

è necessario importare un modulo in qualsiasi modulo che si desidera utilizzare componenti, direttive o tubi del modulo importato. Non c'è modo di aggirarlo.

Che cosa si può fare è quello di creare un modulo che esporta diversi altri moduli (per esempio, la BrowserModule che esporta CommonModule.

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

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

In questo modo si effettua tutto esportato da AllInOneModule disposizione MyModule.

Vedere anche https://angular.io/docs/ts/latest/guide/ngmodule.html

aggiornamento < = RC.5

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

Vedere i commenti qui sotto - anche se per stile guida providers nel componente root dovrebbe essere favorita rispetto boostrap() questo non funziona:

originale

Sulla componente principale add

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

@Component(), @Directive(), @Pipe() includono già @Injectable(). Non c'è bisogno di aggiungerlo anche lì.