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

更新＆gt; = RC.5

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

您可以做的是创建一个导出其他几个模块的模块（例如，导出BrowserModule的{{1}}。

CommonModule

这样，您可以将@NgModule({ declarations: [CoolComponent, CoolDirective, CoolPipe], imports: [MySharedModule1, MySharedModule2], exports: [MySharedModule1, MySharedModule2, CoolComponent, CoolDirective, CoolPipe], }) export class AllInOneModule {} @NgModule({ imports: [AllInOneModule] }) class MyModule {}导出的所有内容都提供给AllInOneModule。

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

更新＆lt; = RC.5

MyModule

请参阅下面的评论 - 即使根组件中的每个样式指南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()。也不需要在那里添加它。

如何在全球范围内提供指令和组件

1 个答案: