web-dev-qa-db-fra.com

Comment déclarer une directive globalement pour tous les modules en angulaire?

Je développe un dépôt Github qui suit le tutoriel officiel de Angular (Tour of Heroes). Vous pouvez voir tout le code ici: https://github.com/Ismaestro/angular7-example-app

Mon problème, c'est que j'ai une directive déclarée dans le module principal de l'application (app.module) et si je l'utilise à l'intérieur de l'AppComponent cela fonctionne bien (la directive ne met en évidence qu'un texte à l'intérieur d'un élément DOM).

Mais j'ai un autre module appelé HeroesModule dans AppModule, et à l'intérieur d'un composant de ce module, cette directive ne fonctionne pas. Le code principal, ici:

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>

Vous pouvez le voir, l'installer et le tester par vous-même dans le dépôt Github, si vous en avez besoin.

Merci!

javascriptangularangular2-directivesangular2-modules
17
ismaestro

Exemple: Plunker

Si vous avez besoin d'un composant/directive à utiliser partout. vous devez créer un nouveau module:

si vous utilisez angular-cli vous pouvez générer:

ng g module my-common

le module:

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

important! les exportations vous permettent d'utiliser les composants/directives en dehors du module.

le composant/la directive:

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

Enfin, vous pouvez importer ce module partout où vous en avez besoin, vous pouvez le mettre sur AppModule, il vous permet de l'utiliser partout sur votre application.

par exemple:

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

Bonne chance!

16
YairTawil

Selon le commentaire de @ CrazyMac, un bon moyen serait de créer un DirectivesModule. À l'intérieur de ce module, vous pouvez déclarer et importer toutes vos directives, puis vous pourrez importer ce module où vous le souhaitez.

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 { }

application/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 { }
20
Lilrom