Question

内置管道是可行的，但我想使用的所有自定义管道都是同样的错误：

管道＆＃39; actStatusPipe＆＃39;无法找到

[错误 - ＆gt;] {{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中搜索的大量解决方案，但是它们无法正常工作。

这让我很困惑，谢谢你回答！

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

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

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

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

Answer 2

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

如果您的组件在另一个模块中声明和导入，您需要在该模块中包含PipeModule。

Answer 3

我对接受的答案没有任何疑问，因为它肯定对我有所帮助。但是，实施之后，我仍然遇到相同的错误。

结果是因为我在组件中也错误地调用了管道：

我的custom-pipe.ts文件：

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

到目前为止，还不错，但是在我的component.html文件中，我按如下方式调用管道：

{{ myData | doSomethingPipe }}

这将再次引发找不到管道的错误。这是因为Angular通过管道装饰器中定义的名称查找管道。因此，在我的示例中，管道应改为这样调用：

{{ myData | doSomething }}

愚蠢的错误，但这花了我很多时间。希望这会有所帮助！

Answer 4

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

添加管道后，如果仍然出现错误并且正在使用“ ng serve”运行Angular站点，请停止它...然后重新启动它。

对我来说，所有其他建议均无用，只是停止然后重新启动“ ng serve”就足以使错误消失。

奇怪。

Answer 5

如果要在另一个模块中声明管道，请确保将其添加到该模块的Declarations and Exports数组中，然后将该模块导入消耗该管道的任何模块中。

Answer 6

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

将此语句添加到管道模块中解决了我的问题。

Answer 7

请确保，如果管道的声明是在一个模块中完成的，而您在另一个模块中使用管道时，则应在当前模块下使用该类的当前模块处提供正确的导入/声明。管。在我的情况下，这就是管道未命中的原因

Answer 8

我遇到了类似的问题，但是将其放在页面的模块中无效。

我创建了一个需要管道的组件。该组件已声明并导出到ComponentsModule文件中，该文件包含应用程序的所有自定义组件。

我必须将PipesModule导入到我的ComponentsModule中，以便这些组件使用这些管道，而不是在使用该组件的页面模块中。

积分：enter link description here回答者：tumain

Answer 9

还要确保您的管道名称（在装饰器内部）是 v̲i̲s̲i̲b̲l̲y camelCased。

这不起作用：@Pipe({ name: 'plural' }) ❌,
但这确实：@Pipe({ name: 'pluralForm' }) ✅

Answer 10

我遇到了类似的问题。我的问题解决了：-

将管道的模块（SharedModule）导入所需的模块。
在提供者数组中添加自定义管道。 @NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}

Angular2：无法找到自定义管道

10 个答案: