web-dev-qa-db-fra.com

Angular2: Impossible de trouver le tuyau personnalisé

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

le tuyau 'actStatusPipe' est introuvable 

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

J'ai essayé de deux manières, déclarez-le dans les déclarations d'app.module:

app.module.ts:

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

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

ou utilisez un autre module pour déclarer et exporter tous mes tuyaux: // tuyau

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

et l'importez 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 de la pipe:

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 à peu près la même chose avec le document (en fait, je viens de copier le document et d'y apporter 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 dérouté, merci de votre réponse!

angularangular2-pipe
41
rui

voir cela fonctionne pour moi.

ActStatus.pipe.ts D'abord c'est ma pipe

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

main-pipe.module.ts in module de tuyau, je dois déclarer mon tuyau et l'exporter.

import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";

import {ActStatusPipe} from "./ActStatusPipe.pipe"; // <---

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

export class MainPipe{}

app.module.ts user ce module de tuyauterie dans n’importe quel module.

@NgModule({
  declarations: [...],
  imports: [..., MainPipe], // <---
  providers: [...],
  bootstrap: [AppComponent]
})

vous pouvez directement l'utilisateur pipe dans ce module. mais si vous sentez que votre pipe est utilisée avec plus d'une composante, je vous suggère de suivre mon approche. 

  1. créer un tuyau.
  2. créer un module séparé et déclarer et exporter un ou plusieurs tuyaux.
  3. utilisateur ce module de tuyau.

Son utilisation dépend totalement de la complexité et des besoins de votre projet. vous pouvez avoir un tuyau qui n’est utilisé qu’une seule fois dans tout le projet et qui peut alors l’utiliser directement sans créer de module tuyau/s (approche module).

54
Vinay Pandya

Cela n'a pas fonctionné pour moi. (Im avec angulaire 2.1.2). Je ne devais PAS importer MainPipeModule dans app.module.ts et l'importer à la place dans le module où le composant Im utilisant le canal est également importé. 

On dirait que si votre composant est déclaré et importé dans un module différent, vous devez également inclure votre PipeModule dans ce module. 

13
Ramon Gonzalez

assurez-vous que si les déclarations pour le canal sont effectuées dans un module, alors que vous utilisez le canal dans un autre module, vous devez fournir les importations/déclarations correctes au module actuel sous lequel est la classe où vous utilisez le canal. Dans mon cas, c'était la raison de la pipe miss

0
Ilya Yevlampiev

Si vous déclarez votre canal dans un autre module, veillez à l'ajouter à ce tableau Déclarations et exportations du module, puis importez ce module dans le module le consommant.

0
Ross
import {CommonModule} from "@angular/common";

L'ajout de cette déclaration au module de canalisation a résolu mon problème.

0
Anitta Paul