angular - Cómo hacer que las directivas y componentes estén disponibles globalmente

angular2-directives

Question

Escribí una directiva personalizada que utilizo 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?

Answer 1

actualización> = RC.5

Debe importar un módulo en el módulo en el que desee utilizar componentes, directivas o canalizaciones del módulo importado. No hay manera de evitarlo.

Lo que puede hacer es crear un módulo que exporte varios otros módulos (por ejemplo, el BrowserModule que exporta CommonModule .

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

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

De esta forma, todo lo exportado por AllInOneModule disponible para MyModule .

Ver también https://angular.io/docs/ts/latest/guide/ngmodule.html

actualizar <= RC.5

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

Vea los comentarios a continuación: aunque los providers guías de estilo en el componente raíz deben ser favorecidos sobre boostrap() esto no funciona:

original

En el componente raíz, agregue

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

@Component() , @Directive() , @Pipe() ya incluyen @Injectable() . No es necesario agregarlo allí también.