módulo - que es un componente en angular

Angular2: no se pudo encontrar la tubería personalizada

Question

La tubería incorporada funciona, pero todas las tuberías personalizadas que quiero usar tienen el mismo error:

no se pudo encontrar la tubería ''actStatusPipe''

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

He intentado dos formas, declararlo en las declaraciones de app.module:

app.module.ts:

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

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

o use otro módulo para declarar y exportar todas mis tuberías: // tubería

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

e importarlo en app.module.

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

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

Pero ninguno de ellos funciona en mi aplicación.

Aquí está mi código de la tubería:

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

Creo que es lo mismo con el documento (de hecho, acabo de copiar el documento e hice una pequeña modificación)

Y la versión de mi angular2 es 2.1.

En mi aplicación se prueban muchas soluciones que se pueden buscar en stackOverflow y google, sin embargo, no funcionan.

Esto me confundió mucho, gracias por tu respuesta!

Answer 1

Esto no funcionó para mí. (Im con Angular 2.1.2). NO tuve que importar MainPipeModule en app.module.ts e importarlo en su lugar en el módulo donde también se importa el componente que estoy usando la tubería.

Parece que si su componente se declara e importa en un módulo diferente, también debe incluir su PipeModule en ese módulo.

Answer 2

Mira, esto está funcionando para mí.

ActStatus.pipe.ts Primero esta es mi pipa

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 en el módulo de tuberías, necesito declarar mis tuberías y exportarlas.

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 usa este módulo de canalización en cualquier módulo.

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

puede utilizar directamente la canalización en este módulo. pero si siente que su tubería se usa con más de un componente, le sugiero que siga mi enfoque.

1. crear tubería
2. cree un módulo separado y declare y exporte una o más tuberías.
3. usuario ese módulo de tubería.

El uso de la tubería depende totalmente de la complejidad y los requisitos de su proyecto. puede tener una tubería que se usó solo una vez en todo el proyecto; en ese caso, puede usarla directamente sin crear un módulo de tubería / s (enfoque de módulo).

Answer 3

Si está declarando su tubería en otro módulo, asegúrese de agregarla a la matriz de Declaraciones y Exportaciones de ese módulo, luego importe ese módulo en cualquier módulo que esté consumiendo esa tubería.

Answer 4

asegúrese de que si las declaraciones de la tubería se realizan en un módulo, mientras usa la tubería dentro de otro módulo, debe proporcionar las importaciones / declaraciones correctas en el módulo actual en el que se encuentra la clase donde está usando la tubería. En mi caso, esa fue la razón de la pérdida de la tubería

Answer 5

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

Agregar esta declaración al módulo de tubería resolvió mi problema.