如何为Angular中的所有模块全局声明一个指令？ [英] How to declare a directive globally for all modules in Angular?

问题描述

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

I'm developing a Github repo which follows the offical tutorial of Angular (Tour of Heroes). You can see all the code here: https://github.com/Ismaestro/angular7-example-app

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

My problem, is that I have a directive declared in the main module of the app (app.module) and if I use it inside the AppComponent it works good (the directive only highlight a text inside a DOM element).

但我在AppModule中有另一个名为HeroesModule的模块，并在该模块的组件，该指令不起作用。主要代码在这里：

But I have another module called HeroesModule within AppModule, and inside a component of this module, this directive doesn't work. The main code, here:

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仓库中查看，安装并自行测试。

You can see, install it and test it by yourself in the Github repo, if you need it.

谢谢！

推荐答案

示例： Plunker

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

If you need component/directive to use everywhere. you should create a new module:

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

if you use angular-cli you can generate:

ng g module my-common

模块：

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

重要！ exports 允许您使用模块外部的组件/指令。

important! the exports allow you to use the components/directives outside the module.

组件/指令：

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

最后，您可以导入该模块无论您需要什么，都可以将它放在AppModule上，它允许您在应用程序的任何位置使用它。

Finally, you can import that module everywhere you need, you can put it on AppModule, it allow you to use it everywhere on your app.

例如：

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

祝你好运！

这篇关于如何为Angular中的所有模块全局声明一个指令？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！