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

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

更新

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

请参阅下面的 cmets - 即使根组件中的每个样式指南 providers 应该优先于 boostrap() 这不起作用：

原创

在根组件上添加

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

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