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

Question

我写了一个自定义指令，我在我的 Angular 2 应用程序中使用它来关闭我的 Angular 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

您必须在要使用导入模块的组件、指令或管道的任何模块中导入模块。没办法了。

你可以做的是创建一个导出其他几个模块的模块（例如，导出 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})]);

请参阅下面的评论 - 尽管根组件中的每个样式指南 providers 应该比 boostrap() 更受青睐，但这不起作用：

原创

~~在根组件上添加~~

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

@Component()、@Directive()、@Pipe() 已包含 @Injectable()。也不需要在那里添加它。

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

How to make directives and components available globally

angular2-directives

angular