Angular2:无法找到自定义管道

Question

内置管道是工作,但我想使用的所有自定义管道都是相同的错误:

无法找到管道'actStatusPipe'

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

我尝试了两种方法,在app.module的声明中声明它:

app.module.ts:

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

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

或者使用其他模块来声明和导出我的所有管道:// pipe

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中搜索的大量解决方案,但它们不起作用.

这让我很困惑,谢谢你的回答!

Answer 1

看到这对我有用.

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,我需要声明我的管道并将其导出.

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

你可以在这个模块中直接用户管道.但如果你觉得你的管道与多个组件一起使用,我建议你按照我的方法.

1. 创建管道.
2. 创建单独的模块并声明和导出一个或多个管道.
3. 用户即管道模块.

如何使用管道完全取决于您的项目复杂性和要求.你可以有一个在整个项目中只使用一次的管道,在这种情况下可以直接使用它而不需要创建管道模块(模块方法).

Answer 2

这对我没有用.(我与Angular 2.1.2).我没有在app.module.ts中导入MainPipeModule,而是在导入了使用管道的组件Im的模块中导入它.

看起来如果在不同的模块中声明和导入组件,则需要在该模块中包含PipeModule.

Answer 3

一个非常愚蠢的答案（我会在一分钟内给自己投票），但这对我有用：

添加管道后，如果您仍然遇到错误并且正在使用“ ng serve”运行您的 Angular 站点，请停止它...然后再次启动它。

对我来说，其他任何建议都不起作用，但只需停止，然后重新启动“ ng serve”就足以使错误消失。

奇怪的。

Answer 4

我对接受的答案没有异议，因为它肯定对我有帮助。但是，实施后，我仍然遇到相同的错误。

原来这是因为我在我的组件中也错误地调用了管道：

我的 custom-pipe.ts 文件：

@Pipe({ name: 'doSomething' })
export class doSomethingPipe implements PipeTransform {
    transform(input: string): string {
        // Do something
    }
}

到目前为止，一切都很好，但是在我的 component.html 文件中，我按如下方式调用管道：

{{ myData | doSomethingPipe }}

这将再次抛出未找到管道的错误。这是因为 Angular 通过管道装饰器中定义的名称查找管道。所以在我的例子中，应该像这样调用管道：

{{ myData | doSomething }}

愚蠢的错误，但它花费了我相当多的时间。希望这可以帮助！