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

Escribí una directiva personalizada que uso 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. Esto lamentablemente 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?

actualización> = RC.5

Debe importar un módulo en el módulo que desee para usar componentes, directivas o tuberías 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, hará que todo lo que AllInOneModule exporte 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})]); 

Consulte los comentarios a continuación – aunque por providers guías de estilo en el componente raíz se debe favorecer a boostrap() esto no funciona:

original

En el componente raíz, agrega

 @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.