web-dev-qa-db-fra.com

Comment déclarer un tuyau globalement à utiliser dans différents modules?

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

J'ai besoin de l'utiliser dans deux modules différents, Module1 et Module2.
Quand j'importe dans Module1 et 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 dans le 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, ça jette une erreur

Le tuyau 'currConvert' est introuvable

angulartypescriptpipe
44
Sajeetharan - MSFT

Dans Angular, une bonne technique pour partager des directives, des composants, des tuyaux, etc. communs consiste à utiliser un module partagé .

Ces modules déclarent et exportent des parties communes afin de les rendre utilisables pour tous vos autres modules.

La section Principes de base de la angular est une très bonne lecture sur les modules partagés.

Prenons comme exemple votre pipe currConvert.

  • Déclarer un nouveau NgModule appelé ApplicationPipesModule

  • Ajoutez le tuyau aux tableaux declarations et exports des métadonnées du décorateur NgModule

  • Ajoutez les modules éventuellement nécessaires au fonctionnement de votre pipe dans le tableau imports

    // application-pipes.module.ts
// other imports
import { CurrConvertPipe } from './{your-path}';

@NgModule({
  imports: [
    // dep modules
  ],
  declarations: [ 
    CurrConvertPipe
  ],
  exports: [
    CurrConvertPipe
  ]
})
export class ApplicationPipesModule {}

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

    // my-module1.module.ts
// other imports
import { ApplicationPipesModule } from './{your-path}';   

@NgModule({
 imports: [
   // other dep modules
   ApplicationPipesModule
 ],
 declarations: [],
 exports: []
})
export class MyModule1 {}
101
cyr-x

vous pouvez utiliser modules de partage pour partager votre service, directive, tuyaux, composants

vous devez créer un module et importer les tubes, la directive, les services ou les composants et définir la déclaration, l'exportation et les fournisseurs des services.

importez le module de partage là où vous le souhaitez et utilisez-le.

essentiellement les pipes et les directives déclarées et exportées dans les méta-données NgModules. pour les services, définissez forRoot 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 ]
    };
  }
}

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

Comme vous le pouvez, vous pouvez le faire selon d’autres modalités.

5
hazan kazim

Vous devez créer un module, c’est-à-dire SharedModule et y déclarer votre pipe. Ensuite, vous devez exporter le pipe dans SharedModule et importer votre SharedModule dans les deux Module1 et Module2. Les documents d'Angular contiennent un excellent article: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module

4
Ledzz

Si vous générez un canal à l'aide de la CLI pour un module partagé, vous devrez l'ajouter manuellement à la liste "exportations". Mon canal d'erreur dans le navigateur jusqu'à ce que j'ajoute le canal en tant qu'exportation dans mon module partagé importé/déclaré.

1
cbilliau