Angular2: пользовательская труба не найдена

21

Встроенный канал работает, но все пользовательские каналы, которые я хочу использовать, имеют одинаковую ошибку:

  

не удалось найти трубку 'actStatusPipe'

     

[ERROR - & gt;] {{data.actStatus | actStatusPipe}}

Я пробовал два пути, объявляю его в объявлениях app.module:

app.module.ts:

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

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

или использовать другой модуль для объявления и экспорта всех моих труб: // труба

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

и импортировать его в app.module.

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

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

Но никто из них не работает в моем приложении.

Вот мой код трубы:

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

Я думаю, что это больше всего похоже на документ (на самом деле, я только что скопировал его из документа и сделал небольшую модификацию)

И моя версия angular2 - 2.1.

Множество решений, которые можно искать в stackOverflow и google, используются в моем приложении, однако они не работают.

Это меня смутило, спасибо за ответ!

    
задан rui 07.11.2016 в 05:12
источник
  • Не могли бы вы воспроизвести его на плункер? –  yurzui 07.11.2016 в 06:54
  • много путаницы в вашем коде также. сначала попробуйте сделать это простым, создайте пользовательский канал и добавьте объявления: [AppComponent, CapitalizePipe] массив NgModule (). чем сообщить мне, что он работает? –  Vinay Pandya 07.11.2016 в 10:03
  • @yurzui я постараюсь после работы –  rui 07.11.2016 в 11:31
  • @VinayPandya сообщение об ошибке ниже: Ошибки синтаксического анализа шаблона: Не удалось найти трубку 'actStatusPipe' –  rui 07.11.2016 в 11:38
  • Я только что скопировал вашу трубку, и она работает для меня –  Vinay Pandya 07.11.2016 в 11:44

2 ответа

26

см. это работает для меня.

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

<сильные> Основные-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]
})
    
ответ дан Vinay Pandya 07.11.2016 в 11:53
источник
  • Наконец, я узнаю, что это потому, что я импортирую канал в корневом модуле и использую его в импорте компонента другим модулем. Я просто думаю, что он будет работать глобально раньше, и ошибка будет вызвана моей трубой. Ваш ответ вдохновляет меня на это, спасибо за вашу помощь! –  rui 07.11.2016 в 12:02
  • , чем плз, отмечают мой ответ. –  Vinay Pandya 07.11.2016 в 12:03
  • @rui Ваш комментарий спас мой день .. У меня также была такая же проблема .. hahaha –  Shashank Gaurav 02.12.2017 в 16:09
  • @rui, как и выше, ваш комментарий спас меня –  GBarroso 02.06.2018 в 21:59
9

Это не сработало для меня. (Im с угловым 2.1.2). Я НЕ должен был импортировать MainPipeModule в app.module.ts и импортировать его вместо этого в модуль, в который также импортируется компонент Im, использующий канал.

Похоже, если ваш компонент объявлен и импортирован в другом модуле, вам также необходимо включить свой PipeModule в этот модуль.     

ответ дан Ramon Gonzalez 06.12.2016 в 21:54
источник
  • Что? Это бессмысленно. Не существует глобального импорта для чего-то подобного? –  Phil 06.07.2017 в 21:37
  • , но что, если вам нужно импортировать его в 2 модуля? Я считаю, что это не сработает. Я получаю консольную ошибку, говорящую, чтобы использовать ее в более высоком модуле вместо 2 модулей, но тогда модуль приложения не делает трюк –  SeanKPS 27.05.2018 в 15:31