如何为Angular中的所有模块全局声明一个指令？

Question

我正在开发一个Github回购,它遵循Angular(英雄之旅)的官方教程.您可以在此处查看所有代码:https: //github.com/Ismaestro/angular7-example-app

我的问题是,我在应用程序的主模块(app.module)中声明了一个指令,如果我在AppComponent中使用它,它运行良好(该指令只突出显示DOM元素内的文本).

但我在AppModule中有另一个名为HeroesModule的模块,在该模块的一个组件内,该指令不起作用.主要代码,这里:

应用程序/ 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 ]
})

...

应用程序/英雄/ heroes.module.ts

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

应用程序/共享/ 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.component.ts

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

应用程序/英雄/英雄列表/英雄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

根据@ CrazyMac的评论,一个好方法是创建一个DirectivesModule.在此模块中,您可以声明并导入所有指令,然后您就可以在任何地方导入此模块.

应用程序/模块/指令/ directives.module.ts

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

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

应用程序/模块/指令/ highLight.directive.ts

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

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

应用程序/模块/ otherModule /其他-module.module.ts

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

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

Answer 2

示例:Plunker

如果您需要组件/指令在任何地方使用.你应该创建一个新模块:

如果你使用angular-cli,你可以生成:

ng g module my-common

模块:

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

重要!该出口允许您使用外部模块组件/指令.

组件/指令:

@Component({
  selector: 'common-component',
  template: `<h1> common component</h1>`
})
export class MyCommonComponent{}

最后,您可以在任何需要的地方导入该模块,您可以将其放在AppModule上,它允许您在应用程序的任何位置使用它.

例如:

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

祝好运!