如何使指令和组件在全球范围内可用

我写了一个自定义指令，在我的Angular 2应用程序中用于closuresAngular 2应用程序的所有不同组件中的内容面板（我的模板中的一些内容持有者）。 由于这个代码对于每个组件来说都是相同的，所以我认为编写一个可以定义一次的指令是有意义的，并且可以在所有组件中使用。 这是我的指令看起来像：

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

现在我期望我可以在app.component父组件中导入一次这个指令，然后我可以在所有的子组件中使用这个指令。 这可悲的是不起作用，所以我将不得不单独导入每个组件中的这个指令。 我做错了什么？ 或者这种行为根本不可能？

Answer 1

更新> = RC.5

您必须在任何您想使用导入模块的组件，指令或pipe道的模块中导入模块。 没有办法绕过它。

你可以做的是创build一个模块，导出其他几个模块（例如，导出CommonModule的BrowserModule 。

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

这样，您可以将AllInOneModule导出的所有内容都提供给MyModule 。

另见https://angular.io/docs/ts/latest/guide/ngmodule.html

更新<= RC.5

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

请参阅下面的注释 – 尽pipe根组件中的每个样式指南providers都应该优先于boostrap()但这不起作用：

原版的

在根组件上添加

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

@Component() ， @Directive() ， @Pipe()已经包含@Injectable() 。 没有必要在那里添加它。