Angular2 : le custom pipe n'a pas pu être trouvé

Question

Le tuyau intégré fonctionne, mais tous les tuyaux personnalisés que je veux utiliser ont la même erreur :

le tuyau 'actStatusPipe' est introuvable

[ERROR ->]{{data.actStatus | actStatusPipe}}

J'ai essayé deux méthodes, en le déclarant dans les déclarations de app.module :

app.module.ts :

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

ou utiliser un autre module pour déclarer et exporter tous mes tuyaux : //pipe

import {ActStatusPipe} from "./actPipe"

@NgModule({
    declarations:[ActStatusPipe],
    imports:[CommonModule],
    exports:[ActStatusPipe]
})

export class MainPipe{}

et l'importer dans app.module.

//pipe
import {MainPipe} from '../pipe/pipe.module'

@NgModule({
    declarations:[...],
    imports:[...,MainPipe],
})

Mais aucun d'entre eux ne fonctionne dans mon application.

Voici mon code du tuyau :

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

@Pipe({
    name:'actStatusPipe'
})
export class ActStatusPipe implements PipeTransform{
    transform(status:any):any{
        switch (status) {
            case 1:
                return "UN_PUBLISH";
            case 2:
                return "PUBLISH";
            default:
                return status
        }
    }
}

Je pense que c'est en grande partie la même chose que le document (en fait, j'ai juste copié du document et fait une petite modification).

Et la version de mon angular2 est 2.1.

Beaucoup de solutions qui peuvent être recherchées dans stackOverflow et google sont essayées dans mon application, mais elles ne fonctionnent pas.

Cela m'a beaucoup perturbé, merci pour votre réponse !

Answer 1

Assurez-vous également que le nom de votre tube (à l'intérieur du décorateur) est visiblement en majuscule.

Ce site ne fonctionne pas : @Pipe({ name: 'plural' }) ,
mais ceci fait : @Pipe({ name: 'pluralForm' })

Answer 2

Soyez sûr que si les déclarations pour le pipe sont faites dans un module, alors que vous utilisez le pipe dans un autre module, vous devez fournir des importations/déclarations correctes dans le module courant sous lequel se trouve la classe où vous utilisez le pipe. Dans mon cas, c'était la raison de l'échec du pipe.

Answer 3

J'ai rencontré un problème similaire, mais le fait de le placer dans le module de ma page n'a pas fonctionné.

J'avais créé un composant, qui avait besoin d'un tuyau. Ce composant a été déclaré et exporté dans un fichier ComponentsModule, qui contient tous les composants personnalisés de l'application.

J'ai dû placer mon PipesModule dans mon ComponentsModule en tant qu'import, afin que ces composants utilisent ces pipes et non dans le module de la page utilisant ce composant.

Crédits : Entrez la description du lien ici Réponse de : tumain

Answer 4

J'ai été confronté à un problème similaire. Le mien a été résolu par : -.

1. Importation du module du tuyau (SharedModule) dans le module requis.
2. Ajoutez le tuyau personnalisé dans le tableau des fournisseurs. @NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}

Answer 5

Si vous déclarez votre pipe dans un autre module, assurez-vous de l'ajouter au tableau des déclarations et exportations de ce module, puis importez ce module dans le module qui consomme ce pipe.