Aucun fournisseur pour CustomPipe - angular 4

Question

J'ai un canal de format décimal personnalisé qui utilise angular Tube décimal en tour. Ce canal fait partie du module partagé. Je l'utilise dans le module de fonctionnalité et je n'obtiens aucune erreur de fournisseur lors de l'exécution du programme application.

S'il vous plaît ignorer s'il y a une faute de frappe .

./ src/pipes/custom.pipe.ts

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

./ modules/shared.module.ts

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

...

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

J'injecte le canal personnalisé dans l'un des composants et appelle la méthode de transformation pour obtenir les valeurs transformées. Le module partagé est importé dans le module de fonctions.

Answer 1

Si vous souhaitez utiliser la méthode transform() du tube dans le composant, vous devez également ajouter CustomPipe aux fournisseurs du module:

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

...

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

Answer 2

Outre l'ajout de CustomPipe à la liste des fournisseurs du module, vous pouvez également l'ajouter aux fournisseurs du composant. Cela peut être utile si votre canal personnalisé n’est utilisé que dans quelques composants.

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

J'espère que cela t'aides.

Answer 3

Vous pouvez également créer le tuyau Injectable (de la même manière que pour les services que vous créez avec la CLI):

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

    @Pipe({
      name: 'customDecimalPipe'
    })
    @Injectable({
      providedIn: 'root'
    })
    export class CustomPipe extends PipeTransform {
      ...
    }