2016-11-07 16 views
19

Wbudowany rura jest praca, ale wszystkie niestandardowe Rury że chcę używania jest ten sam błąd:Angular2 custom rura nie została znaleziona

the pipe 'actStatusPipe' could not be found

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

Próbowałem dwa sposoby, zadeklarować to w aplikacji. deklaracje modułu:

app.module.ts:

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

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

lub użyć innych moduł zadeklarować i eksportować wszystkie moje rury // rura

import {ActStatusPipe} from "./actPipe" 

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

export class MainPipe{} 

i zaimportuj go do pliku app.module.

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

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

Ale żaden z nich nie działa w mojej aplikacji.

Oto mój kod rury:

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

myślę, że większość to samo z dokumentu (W rzeczywistości, mam po prostu kopiowane z dokumentu i zrobił trochę modyfikacji)

A moja wersja angular2 ma 2.1.

Wiele rozwiązań, które można przeszukiwać w StackOverflow i Google są wypróbowane w mojej aplikacji, ale nie działają.

To bardzo mnie zdezorientowało, dziękuję za odpowiedź!

+0

Czy możesz ją odtworzyć na plunkerze? – yurzui

+0

dużo zamieszania w twoim kodzie także. Najpierw spróbuj zrobić to w prosty sposób, utwórz niestandardową potok i dodaj deklaracje: [AppComponent, CapitalizePipe] tablica NgModule(). niż dać mi znać, że działa? –

+0

@yurzui chciałbym spróbować po pracy – rui

Odpowiedz

22

patrz to działa dla mnie.

ActStatus.pipe.ts

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

głównymi-pipe.module.ts

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

@NgModule({ 
    declarations: [...], 
    imports: [..., MainPipe], 
    providers: [...], 
    bootstrap: [AppComponent] 
}) 
+2

W końcu dowiaduję się, że to dlatego, że importuję potok w module głównym i używam go w importowaniu komponentu przez inny moduł. Myślę, że będzie on działał globalnie, a błąd jest powodowany przez mój potok. Twoja odpowiedź inspiruje mnie do tego, dzięki za pomoc! – rui

+0

niż plz zaznacz moją odpowiedź. –

+0

@rui Twój komentarz zapisał mój dzień .. Miałem też ten sam problem .. hahaha –

9

to di dnt pracował dla mnie. (Im z Angular 2.1.2). NIE miałem zaimportować MainPipeModule w app.module.ts i zaimportować go zamiast tego do modułu, w którym jest również importowany komponent Im za pomocą potoku.

Wygląda na to, że jeśli twój komponent został zadeklarowany i zaimportowany do innego modułu, musisz również dołączyć do niego moduł PipeModule.

+0

Co? To nie ma sensu. Nie ma globalnego importu czegoś takiego? – Phil

Powiązane problemy