Comment déclarer une directive à l'échelle mondiale pour tous les modules Angulaire?
Je suis l'élaboration d'un dépôt Github qui suit le tutoriel officiel Angulaire (Tour des Héros). 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 la AppComponent il fonctionne bien (la directive ne mettre en surbrillance le texte à l'intérieur d'un élément du DOM).
Mais j'ai un autre module appelé HeroesModule dans AppModule, et à l'intérieur d'un composant de ce module, la présente directive ne fonctionne pas. Le code principal, ici:
app/app.le 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/héros/héros.le module.ts
@NgModule({
imports: [
CommonModule,
FormsModule,
HeroRoutingModule
],
declarations: [
HeroListComponent,
HeroSearchComponent,
HeroDetailComponent,
HeroFormComponent
],
providers: [
HeroService
],
exports: [
HeroSearchComponent
]
})
app/shared/highlight.la 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.composante.ts
<h1 tohHighlight>{{title}}</h1> <----- HERE WORKS
<toh-nav></toh-nav>
<router-outlet></router-outlet>
app/héros/héros-liste/-héros de la liste.composante.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, de l'installer et de le tester par vous-même dans le dépôt Github, si vous en avez besoin.
Merci!
Il appartient à AppModule!
Le déplacer vers un autre module (module de fonction) et ensuite d'ajouter ce module à
import: []
de chaque module à l'endroit où vous souhaitez l'utiliser.J'ai mis à jour mon commentaire
Vous avez raison, bien sûr. l'exception réponse est fausse. vous auriez encore besoin de t d'importation pour chaque module que vous avez besoin de ses exportations. Seulement injecteurs/services sont hissés à la racine ( à moins paresseux)
OriginalL'auteur ismaestro | 2017-01-06
Vous devez vous connecter pour publier un commentaire.
Exemple: Plunker
Si vous avez besoin de composant/directive à utiliser partout. vous devez créer un nouveau module:
si vous utilisez angulaires-cli vous pouvez générer:
le module:
important! le exportations vous permettre d'utiliser les composants/des directives à l'extérieur du module.
le composant/directive:
Enfin, vous pouvez importer ce module de partout où vous avez besoin, vous pouvez le mettre sur AppModule, il vous permet de l'utiliser partout, sur votre application.
par exemple:
Bonne Chance!
Sur le compnents de AppModule déclarations cela va fonctionner, mais vous avez besoin d'importer MyCommonModule sur chaque module indépendant qui souhaite utiliser des composants communs.
Merci!! Enfin je l'ai résolu de la création d'un nouveau module appelé SharedModule (qui déclare et l'exportation de la directive) et de l'importer dans AppModule et HeroesModule. Mais, est-il possible de l'importer uniquement dans AppModule et hériter de tous les modules qui AppModule d'importation?
comment ionique pour importer toutes ses composantes, sans déclarer dans chaque module? où est défini comme le mondial? par exemple: <ion-liste> <ion-item> <ion-barre de recherche>, etc ?
ce n'est tout simplement pas vrai. si vous avez un autre module qui a un composant et le composant voulez quelque chose de l'autre module de la vôtre, même si vous avez exporté à la racine - il ne SERA pas RECONNU par le nouveau module. Seuls les injecteurs ne
OriginalL'auteur YairTawil
Selon @CrazyMac commentaire, un bon moyen serait de créer un
DirectivesModule
. À l'intérieur de ce module, vous pouvez déclarer et d'importer toutes vos directives, alors vous serez en mesure d'importer ce module n'importe où vous voulez.application/modules/directives/directives.le module.ts
application/modules/directives/highLight.la directive.ts
application/modules/otherModule/autres-module.le module.ts
OriginalL'auteur Lilrom