如何使指令和组件在全球范围内可用 [英] How to make directives and components available globally

问题描述

我编写了一个自定义指令，我在我的 Angular 2 应用程序中使用它来关闭我的 Angular 2 应用程序的所有不同组件中的内容面板(我模板中的一些内容持有者).由于此代码对于每个组件都完全相同，因此我认为编写一个可以定义一次并在所有组件中使用的指令是有意义的.这是我的指令的样子:

I wrote a custom directive that I use in my Angular 2 application to close content panels (some content holders in my template) in all the different components of my Angular 2 application. Since this code is quite the same for each component, I thought that I would make sense to write a directive that I could define once, and use in all components. This is what my directive looks like:

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 父组件中导入一次该指令，然后我可以在所有子组件中使用该指令.遗憾的是这行不通，所以我必须在每个组件中分别导入这个指令.难道我做错了什么?或者这种行为根本不可能?

Now I expected that I could import this directive once in a app.component parent component, and that I then could use this directive throughout all the child components. This sadly doesn't work, so I would have to import this directive in each component separately. Am I doing something wrong? Or is this behaviour simply not possible?

推荐答案

更新 >=RC.5

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

You have to import a module in whatever module you want to use components, directives or pipes of the imported module. There is no way around it.

您可以做的是创建一个导出多个其他模块的模块(例如，导出 CommonModule 的 BrowserModule.

What you can do is to create a module that exports several other modules (for instance, the BrowserModule that exports CommonModule.

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

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

通过这种方式，您可以将 AllInOneModule 导出的所有内容都提供给 MyModule.

This way you make everything exported by AllInOneModule available to MyModule.

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

更新 <=RC.5

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

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

See comments below - even though per style guide providers in the root component should be favored over boostrap() this doesn't work:

原创

在根组件上添加

On the root component add

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

@Component(), @Directive(), @Pipe() 已经包含 @Injectable()>.也不需要在那里添加.

@Component(), @Directive(), @Pipe() already include @Injectable(). No need to add it there as well.

这篇关于如何使指令和组件在全球范围内可用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！