Angular2: tubo personalizado no se pudo encontrar


La tubería incorporada es trabajo, pero todas las tuberías personalizadas que quiero usar son el mismo error:

La tubería 'actStatusPipe' no se pudo encontrar

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

He intentado dos maneras,declararlo en la aplicación.declaraciones del módulo:

App.módulo.ts:

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

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

O usar otro módulo para declarar y exportar todas mis tuberías: // pipe

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

E importarlo en la aplicación.módulo.

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

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

Pero ninguno de ellos funciona en mi app.

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 casi lo mismo con el documento (De hecho,acabo de copiar del documento e hice una pequeña modificación)

Y la versión de mi angular2 es 2.1.

Muchas soluciones que se pueden buscar en stackOverflow y Google se prueban en mi aplicación,sin embargo, no funcionan.

Esto me confundió mucho, gracias por su respuesta!

Author: rui, 2016-11-07

4 answers

Mira esto está funcionando para mí.

ActStatus.tubo.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
    }
  }
}

Tubería principal.módulo.ts en el módulo de tubería, necesito declarar mi tubería y exportarla.

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.módulo.ts usuario este módulo de tubería en cualquier módulo.

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

Puede canalizar directamente el usuario en este módulo. pero si usted siente que su tubo se utiliza con en 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 que el módulo de tubería.

Cómo usar la tubería depende totalmente de la complejidad y los requisitos de su proyecto. puede tener una tubería que se utiliza solo una vez en todo el proyecto en ese caso hacer puede usarlo directamente sin crear pipe / s module (module approach).

 38
Author: Vinay Pandya,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-30 06:14:14

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

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

 11
Author: Ramon Gonzalez,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-06 20:54:21

Si está declarando su tubería en otro módulo, asegúrese de agregarla a ese módulo Declarations and Exports array, luego importe ese módulo en cualquier módulo que esté consumiendo esa tubería.

 0
Author: Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-26 07:00:53
import {CommonModule} from "@angular/common";

Agregar esta instrucción al módulo pipe resolvió mi problema.

 0
Author: Anitta Paul,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-09-09 16:17:57