如何为所有模块全局声明指令？

Question

我正在开发Github仓库，该仓库遵循Angular（英雄之旅）的官方教程。您可以看到所有代码here。

[我的问题是，我在应用程序的主模块（app.module）中声明了一个指令，并且，如果我在AppComponent中使用它，它会很好地工作（该指令仅突出显示DOM元素内的文本）。

但是我在HeroesModule中有另一个名为AppModule的模块，并且在该模块的组件内部，此指令不起作用。

主要代码，在这里：

app / app.module.ts

...

import { HighlightDirective } from "./shared/highlight.directive";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        CoreModule,
        HeroesModule
    ],
    declarations: [
        AppComponent,
        HeroTopComponent,
        HighlightDirective <-------
    ],
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ],
    bootstrap: [ AppComponent ]
})

...

app / heroes / heroes.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroRoutingModule
    ],
    declarations: [
        HeroListComponent,
        HeroSearchComponent,
        HeroDetailComponent,
        HeroFormComponent
    ],
    providers: [
        HeroService
    ],
    exports: [
        HeroSearchComponent
    ]
})

app / shared / highlight.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({ selector: '[tohHighlight]' })

export class HighlightDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.backgroundColor = 'yellow';
    }
}

app / app.component.ts

<h1 tohHighlight>{{title}}</h1> <----- HERE WORKS
<toh-nav></toh-nav>
<router-outlet></router-outlet>

app / heroes / hero-list / hero-list.component.ts

<div *ngIf="selectedHero">
    <h2>
        {{selectedHero.name | uppercase}} is my hero
    </h2>
    <p tohHighlight>Test</p> <----- HERE IT DOESN'T
    <button (click)="gotoDetail()">View Details</button>
</div>

[如果需要，您可以在Github存储库中查看，安装并自行测试。

Answer 1

如果您需要使用指令

@Directive({
  selector: '[appMyCommon]'
})
export class MyCommonDirective{}

应该在任何地方创建一个新模块。

如果使用Angular CLI，则可以生成：

ng g module my-common

模块：

@NgModule({
 declarations: [MyCommonDirective],
 exports:[MyCommonDirective]
})
export class MyCommonModule{}

重要！ exports允许您在模块外部使用指令。

最后，在需要使用该指令的每个模块中导入该模块。

例如：

@NgModule({
  imports: [MyCommonModule]
})
export class AppModule{}

示例：Plunker

Answer 2

根据@CrazyMac的评论，一个好方法是创建一个DirectivesModule。在此模块内，您可以声明和导入所有指令，然后就可以在所需的任何位置导入此模块。

app / modules / directives / directives.module.ts

import { NgModule } from '@angular/core';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  imports: [],
  declarations: [HighlightDirective],
  exports: [HighlightDirective]
})
export class DirectivesModule { }

app / modules / directives / highLight.directive.ts

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[myHighlight]' })
export class HighlightDirective {
  constructor(el: ElementRef) {
    el.nativeElement.style.backgroundColor = 'yellow';
  }
}

app / modules / otherModule / other-module.module.ts

import { DirectivesModule } from '../directives/directives.module';

@NgModule({
  imports: [
    DirectivesModule
  ],
  declarations: []
})
export class OtherModule { }