Pas de Fournisseur pour CustomPipe - angulaire 4

J'ai un custom format décimal tuyau qui utilise angulaire Décimal pipe inturn. Cette pipe est une partie du module partagé. Je vais utiliser cette fonctionnalité module et pas du fournisseur d'erreur lors de l'exécution de l'application.

S'il vous plaît ignorer s'il y a des fautes de frappe.

./src/tuyaux/custom.la pipe.ts

import { DecimalPipe } from '@angular/common';
..
@Pipe({
    name: 'customDecimalPipe'
})
...
export class CustomPipe {
constructor(public decimalPipe: DecimalPipe) {}
transform(value: any, format: any) {
    ...
}

./modules/partagée.le module.ts

import  { CustomPipe } from '../pipes/custom.pipe';

...

@NgModule({
  imports:      [ .. ],
  declarations: [ CustomPipe ],
  exports:    [ CustomPipe ]
})
export class SharedModule { }

J'injecte la coutume de la pipe à l'un des composants et de l'appel de méthode transformation pour obtenir les valeurs transformées. Le module partagé est importé dans la fonctionnalité du module.

InformationsquelleAutor mperle | 2017-09-19
  1. 49

    Si vous souhaitez utiliser du tuyau de transform() méthode d'un composant, vous devez également ajouter CustomPipe module de fournisseurs:

    import  { CustomPipe } from '../pipes/custom.pipe';

...

@NgModule({
  imports:      [ .. ],
  declarations: [ CustomPipe ],
  exports:    [ CustomPipe ],
  providers:    [ CustomPipe ]
})
export class SharedModule { }
    • Je vous remercie pour votre réponse. ce qui signifie que le tube devient une injection de sorte qu'il doit être fourni. suis-je en droit.?
    • Exactement.
    • Mais, ne s'écartent forme angulaire partagé de définition de module. ?
    • super réponse! Merci.
    • vous pouvez ajouter la CustomPipe à l' *ServiceModule*(si vous avez un serveur dédié) ou de toute fonctionnalité du module à la place de l'partagée.
    InformationsquelleAutor Stefan Svrkota
  2. 6

    En dehors de l'ajout de l' CustomPipe pour le module de la liste des fournisseurs, une alternative est d'ajouter à la composante de fournisseurs. Cela peut être utile si votre tuyauterie sur mesure est utilisé que dans un petit nombre de composants.

    import  { CustomPipe } from '../pipes/custom.pipe';
...
@Component({
    templateUrl: './some.component.html',
    ...
    providers: [CustomPipe]
})
export class SomeComponent{
    ...
}

    Espère que cette aide.

    InformationsquelleAutor Faruq
  3. 1

    Vous pouvez également en faire la pipe Injectable (de la même manière que cela se fait avec les services que vous créez à l'aide de la cli):

        import { Injectable, Pipe, PipeTransform } from '@angular/core';

    @Pipe({
      name: 'customDecimalPipe'
    })
    @Injectable({
      providedIn: 'root'
    })
    export class CustomPipe extends PipeTransform {
      ...
    }
    InformationsquelleAutor José Antonio Postigo