Angular2：找不到自定义管道 [英] Angular2: custom pipe could not be found

问题描述

内置管道正常工作，但是我要使用的所有自定义管道都存在相同的错误：

The built-in pipe is work,but all custom pipes that i wanna use are the same error:

管道'actStatusPipe找不到

the pipe 'actStatusPipe' could not be found

[错误->] {{data.actStatus | actStatusPipe}}

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

我尝试了两种方法，在app.module的声明中进行了声明：

I have tried two ways,declare it in app.module's declarations:

app.module.ts：

app.module.ts:

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

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

或使用其他模块声明和导出我的所有管道：
//管道

or use other module to declare and export all my pipes: //pipe

import {ActStatusPipe} from "./actPipe"

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

export class MainPipe{}

并将其导入到app.module中。

and import it in app.module.

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

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

但是它们都不在我的应用程序中工作。

But none of them work in my app.

这是我的管道代码：

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

我认为与文档大部分相同（实际上，我只是从文档中复制并进行了一些修改）

I think it is most of the same with the document(In fact,i have just copied from the document and made a little modification)

我的angular2版本是2.1。

And my angular2's version is 2.1.

可以在stackOverflow和google中搜索的很多解决方案都在我的应用中尝试过，但是不管用。

Lots of solution that can be searched in stackOverflow and google are tried in my app,however they don't work.

这让我很困惑，谢谢您的回答！

This confused me a lot,thanks for you answer!

推荐答案

看到此方法有效

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

main-pipe.module.ts 在管道模块中，我需要声明我的管道并导出。

main-pipe.module.ts in pipe module, i need to declare my pipe/s and export it.

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 用户在任何模块中使用此管道模块。

app.module.ts user this pipe module in any module.

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

您可以直接此模块中的用户管道。但是，如果您认为管道使用了多个组件，则建议您遵循我的方法。

you can directly user pipe in this module. but if you feel that your pipe is used with in more than one component i suggest you to follow my approach.

1. 创建管道。


2. 创建单独的模块并声明并导出一个或多个管道。


3. 使用该管道模块。

如何使用管道完全取决于您的项目复杂性和要求。您可能只有一个管道，在整个项目中仅使用了一次。在这种情况下，您可以直接使用它，而无需创建管道模块（模块方法）。

这篇关于Angular2：找不到自定义管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！