Comment déclarer un tuyau de manière globale pour l'utiliser dans différents modules ?

Question

J'ai un tuyau personnalisé nommé CurrConvertPipe

import {Pipe, PipeTransform} from '@angular/core';
import {LocalStorageService} from './local-storage';
@Pipe({name: 'currConvert', pure: false})
export class CurrConvertPipe implements PipeTransform {
  constructor(private currencyStorage: LocalStorageService) {}

  transform(value: number): number {
     let inputRate = this.currencyStorage.getCurrencyRate('EUR');
    let outputputRate = this.currencyStorage.getCurrencyRate(localStorage.getItem('currency'));
    return value / inputRate * outputputRate;
  }
}

Je dois l'utiliser dans deux modules différents, Module1 y Module2 .
Lorsque j'importe dans Module1 y Module2 Je reçois une erreur disant qu'il devrait être déclaré dans un module de niveau supérieur.

Je déclare donc le tuyau à l'intérieur du app.module.ts

import './rxjs-extensions';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CurrConvertPipe } from './services/currency/currency-pipe';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        AppRoutingModule,
        Module1,         
        Module2

    ],

    declarations: [
        AppComponent,
        CurrConvertPipe
    ],
    providers: [

    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Mais quand je l'utilise dans Module1 il y a une erreur

Le tube 'currConvert' est introuvable.

Answer 1

En Angular, une bonne technique pour partager des directives, des composants, des tuyaux, etc. communs est d'utiliser un élément appelé module partagé .

Ces modules déclarent et exportent des parties communes, afin de les rendre utilisables par n'importe lequel de vos autres modules.

El section des fondamentaux de la documentation angulaire est une très bonne lecture sur les modules partagés.

Prenons l'exemple de votre currConvert tuyau.

• Déclarer un nouveau NgModule appelé ApplicationPipesModule

• Ajouter le tuyau à la declarations y exports des tableaux de NgModule -métadonnées du décorateur

• Ajoutez tous les modules qui peuvent être nécessaires pour que votre tuyau fonctionne dans le fichier imports tableau

  // application-pipes.module.ts
  // other imports
  import { CurrConvertPipe } from './{your-path}';
  
  @NgModule({
    imports: [
      // dep modules
    ],
    declarations: [ 
      CurrConvertPipe
    ],
    exports: [
      CurrConvertPipe
    ]
  })
  export class ApplicationPipesModule {}

• d'importer le produit créé ApplicationPipesModule dans les modules où votre tuyau va être utilisé, en l'ajoutant au module imports tableau

  // my-module1.module.ts
  // other imports
  import { ApplicationPipesModule } from './{your-path}';   
  
  @NgModule({
   imports: [
     // other dep modules
     ApplicationPipesModule
   ],
   declarations: [],
   exports: []
  })
  export class MyModule1 {}

Answer 2

Vous pouvez utiliser Modules de partage pour partager votre service, directive, tuyaux, composants

vous devez créer un module et importer les tuyaux, les directives, les services ou les composants et définir la déclaration, l'exportation et les fournisseurs pour les services.

Importez le module de partage dans l'endroit de votre choix et utilisez-le.

essentiellement des tuyaux et des directives déclarés et exportés dans les métadonnées de NgModules. pour les services, définissez pourRoot qui renvoie les fournisseurs pour accéder à d'autres modules.

• shareModule.ts

  import { NgModule, ModuleWithProviders } from '@angular/core';
  import { appDirective } from './{your-path}';
  import { appPipe } from './{your-path}';
  import { appService } from './{your-path}';
  
  @NgModule({
    declarations: [
      appPipe,
      appDirective
    ],
    exports: [
      appPipe,
      appDirective
    ]
  })
  export class SharingModule {
    static forRoot(): ModuleWithProviders {
      return {
        ngModule: SharingModule,
        providers: [ appService ]
      };
    }
  }

• mon-module1.module.ts

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { myComponent } from './{your-path}';
  
  import { SharingModule } from './{your-path}';
  
  @NgModule({
    declarations: [
      myComponent
    ],
    imports: [
      BrowserModule,
      SharingModule.forRoot()  
    ],
  })
  export class AppModule {}

Vous pouvez également le faire dans d'autres modules.

Answer 3

Vous devez créer un module, à savoir SharedModule et déclarez votre pipe à cet endroit. Ensuite, vous devez exporter pipe dans SharedModule et importez votre SharedModule dans les deux Module1 y Module2 . Il y a un excellent article dans la documentation d'Angular : https://angular.io/docs/ts/latest/guide/ngmodule.html#!#modulepartagé

Answer 4

Considérez que vous avez cette structure :

app 
 -shared
   -components
     -DateComponentModule.ts
   -pipes
     -DatesPipe
     -DatesPipeModule.ts

 -SharedModule.ts  

Lorsque vous utilisez DatesPipeModule dans DateComponentModule.

1. Déclarer et exporter DatesPipe dans DatesPipeModule

2. Importez maintenant DatesPipeModule directement dans DateComponentModule.

DatesPipeModule.ts

import { DatesPipe} from './{your-path}';

@NgModule({
  imports: [],
  declarations: [ 
    DatesPipe
  ],
  exports: [
    DatesPipe
  ]
})
export class DatesPipeModule{}

DateComponentModule.ts

import { DatesPipeModule} from './{your-path}';

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

Vous pouvez également l'exporter à partir de SharedModule et l'importer dans DatesComponentModule.ts mais SharedModule ne se chargera pas avant les pipes, donc il jette une erreur.

Answer 5

Si vous générez un pipe à l'aide de CLI pour un module partagé, vous devrez ajouter manuellement le pipe à la liste des "exports". Mon pipe s'est planté dans le navigateur jusqu'à ce que je l'ajoute comme exportation dans le module partagé dans lequel je l'ai importé/déclaré.