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

问题描述

我正在开发一个 Github 存储库，它遵循 Angular(英雄之旅)的官方教程.您可以在此处查看所有代码.

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

但是我在 AppModule 中有另一个名为 HeroesModule 的模块，在这个模块的一个组件中，这个指令不起作用.

主要代码，在这里:

app/app.module.ts

<预><代码>...从./shared/highlight.directive"导入{HighlightDirective}；@NgModule({进口:[浏览器模块，表单模块，Http模块，InMemoryWebApiModule.forRoot(InMemoryDataService),应用路由模块，核心模块，英雄模块],声明: [应用组件，HeroTop组件，HighlightDirective <-------],供应商: [{ 提供:APP_CONFIG，useValue:AppConfig }],引导程序:[ AppComponent ]})...

app/heroes/heroes.module.ts

@NgModule({进口:[通用模块，表单模块，英雄路由模块],声明: [英雄列表组件，英雄搜索组件，英雄细节组件，HeroForm 组件],供应商: [英雄服务],出口:[英雄搜索组件]})

app/shared/highlight.directive.ts

import { Directive, ElementRef, Input } from '@angular/core';@Directive({ 选择器: '[tohHighlight]' })导出类 HighlightDirective {构造函数(el:ElementRef){el.nativeElement.style.backgroundColor = '黄色';}}

app/app.component.ts

{{title}}
<----- 这里的作品<toh-nav></toh-nav><路由器插座></路由器插座>

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

<h2>{{selectedHero.name |大写}}是我的英雄<p tohHighlight>测试</p><----- 这里没有<button (click)="gotoDetail()">查看详情</button>

如果需要，您可以在 Github 存储库中自行查看、安装和测试.

解决方案

如果需要使用指令

@Directive({选择器:'[appMyCommon]'})导出类 MyCommonDirective{}

你应该在任何地方创建一个新的模块.

如果您使用 Angular CLI，您可以生成:

ng g module my-common

模块:

@NgModule({声明:[MyCommonDirective]，出口:[MyCommonDirective]})导出类 MyCommonModule{}

重要！导出允许您在模块外使用指令.

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

例如:

@NgModule({进口:[MyCommonModule]})导出类 AppModule{}

示例:Plunker

I'm developing a Github repo which follows the offical tutorial of Angular (Tour of Heroes). You can see all the code here.

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).

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>

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

解决方案

If you need to use the Directive

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

everywhere you should create a new Module.

If you use the Angular CLI you can generate:

ng g module my-common

The Module:

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

Important! the exports allow you to use the Directives outside the Module.

Finally, import that Module in every Module where you need to use the Directive.

for example:

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

Example: Plunker

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