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

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

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

[ERROR → ] {{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, используются в моем приложении, однако они не работают.

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

Ответы

Ответ 1

видите, это работает для меня.

ActStatus.pipe.ts Сначала это моя 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 в модуле pipe, мне нужно объявить мои pipe/s и экспортировать их.

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

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

  1. создать pipeу.
  2. создать отдельный модуль и объявить и экспортировать один или несколько каналов.
  3. пользователь этого модуля pipes.

Как использовать pipeу полностью зависит от сложности вашего проекта и требований. у вас может быть только одна pipe, которая используется только один раз во всем проекте. в этом случае вы можете использовать его напрямую, не создавая модуль pipe/s (модульный подход).

Ответ 2

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

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

Ответ 3

Если вы объявляете свой канал в другом модуле, обязательно добавьте его в этот массив "Объявления и экспорт", а затем импортируйте этот модуль в любой модуль, который потребляет этот канал.

Ответ 4

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

Добавление этого утверждения в модуль pipe решило мою проблему.

Ответ 5

Ну, это сработало и для меня. Мне пришлось извлечь PipesModule из модуля приложения, потому что в противном случае я получал ошибку двойного импорта и поместил ее в импорт component.module.ts, чтобы он заработал. Weird !! Я полагаю, это связано с отложенной загрузкой компонентов/модуля.

Ответ 6

убедитесь, что если объявления для канала выполняются в одном модуле, когда вы используете канал внутри другого модуля, вы должны обеспечить правильные импорты/объявления в текущем модуле, под которым находится класс, в котором вы используете канал. В моем случае это было причиной промаха pipes

Ответ 7

Как я прокомментировал отмеченный ответ выше, создание отдельного модуля для Pipe не требуется, но, безусловно, является альтернативой. Проверьте официальную сноску документации: https://angular.io/guide/pipes#custom-pipes

Вы используете свою собственную трубу так же, как вы используете встроенные трубы.
Вы должны включить свой канал в массив деклараций AppModule. Если вы решите внедрить свой канал в класс, вы должны предоставить его в массиве провайдеров вашего NgModule.

Все, что вам нужно сделать, это добавить свой канал в массив декларации и массив провайдеров в module где вы хотите использовать канал.

declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]