Angular2: 自定义管道未找到。

Question

内置管道可以使用，但我想使用的所有自定义管道都出现了同样的错误:

找不到管道'actStatusPipe'

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

我已经尝试两种方法，在app.module的declarations中声明它：

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中搜索到的解决方案，但它们都不起作用。

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

- rui

---

你能在 Plunker 上重现它吗？ - yurzui

你的代码有很多混乱。首先尝试简化它，创建自定义管道并将其添加到NgModule()的declarations: [AppComponent, CapitalizePipe]数组中。然后告诉我它是否正常工作？ - Vinay Pandya

@yurzui 我会在工作后尝试。 - rui

@VinayPandya 错误信息如下：模板解析错误： 找不到管道“actStatusPipe”。 - rui

我刚刚复制了你的管道，它对我起作用了。 - Vinay Pandya

最后我发现问题是因为我在根模块中导入了管道，并在其他模块中引用了它。之前我以为它会全局生效。感谢你的帮助！ - rui

Answer 1

看，这对我起作用了。

ActStatus.pipe.ts 首先这是我的pipe（管道）

    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 在 pipe 模块中，我需要声明并导出我的管道。

    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. 使用该管道模块。

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

- Vinay Pandya

---

最后我发现问题出在我在根模块导入了管道，并在其他模块中导入使用了该管道。之前我认为它会在全局生效，但实际上是这个 bug 是由我自己的管道引起的。你的回答启发了我找到问题，感谢你的帮助！ - rui

@Rui，请您能否更清楚地说明您是如何解决这个问题的。 - Rhyous

将管道添加到其自己的模块中不是必需的 - 这只是一种选择。官方文档（https://angular.io/guide/pipes#custom-pipes）指出，必须**声明**和**提供**管道，以便它可以被*注入*。 - ykadaru

我认为这里发生的是，我在MainPipe模块中声明了ActStatusPipe（可能有多个管道），然后导入该MainPipe模块，以便我可以使用所有的管道。 - Vinay Pandya

Answer 2

这对我没有起作用（我使用的是Angular 2.1.2）。我不需要在app.module.ts中导入MainPipeModule，而是需要在导入使用该管道的组件的模块中导入它。

看起来，如果您的组件在不同的模块中声明和导入，您需要在那个模块中包含您的PipeModule。

- Ramon Gonzalez

---

什么？这没有意义。这种东西没有全球进口吗？ - Phil

但是如果您需要在两个模块中导入它怎么办？我发现这样做行不通。控制台会出现错误提示，建议在更高的模块中使用它，而不是在两个模块中使用，但是应用程序模块却无法解决问题。 - SeanMC

是的，这就是Angular的工作方式，但如果您想在整个Angular应用程序中使用该管道模块，可以在app.module.ts中导入它，如果您想在特定模块中使用该管道，则只需在该模块中导入管道模块。 - Vinay Pandya

Answer 3

我知道这个答案可能很愚蠢（我将在一分钟内给自己投反对票），但是它确实对我有用：

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

对我来说，其他建议都没有用，但是简单地停止然后重新启动“ng serve”就足以消除错误。

奇怪。

- Mike Gledhill

Answer 4

我对接受的答案没有异议，因为它确实帮助了我。然而，在实现之后，我仍然遇到了相同的错误。

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

我的 custom-pipe.ts 文件：

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

目前为止，一切都很顺利，但在我的component.html文件中，我是这样调用管道的：

{{ myData | doSomethingPipe }}

这将再次引发“找不到管道”错误。这是因为Angular根据Pipe装饰器中定义的名称查找管道。所以在我的示例中，管道应该像这样调用：

{{ myData | doSomething }}

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

- Leonardum

Answer 5

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

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

- Anitta Paul

---

导入正确的模块可以解决90%的Angular（Material）问题。 - Valen

90%的Angular问题源于文档不清晰。 - Ray Andison

Answer 6

同时确保您的管道名称（在装饰器内部）是明显的驼峰式命名。

这种方式不起作用：@Pipe({name: 'plural'})❌，
但是这种方式可以：@Pipe({name: 'pluralForm'})✅

- Guillaume

---

请不要问我找到这个需要多长时间…… - Guillaume

Answer 7

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

- Eljah

Answer 8

如果您在另一个模块中声明了管道，请确保将其添加到该模块的Declarations和Exports数组中，然后在使用该管道的任何模块中导入该模块。

- Ross

Answer 9

我遇到了类似的问题。我的解决方法是：

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

- hummer.96

---

建议在不需要时不再使用“providers：[]”数组来处理服务和管道等内容。自定义管道应该只需导入并声明即可。 - H3AR7B3A7

Answer 10

我遇到了类似的问题，但将其放在我的页面模块中并没有起作用。

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

为了让这些组件使用这些管道而不是在使用该组件的页面模块中使用它们，我必须将我的PipesModule作为导入放在我的ComponentsModule中。

致谢：进入链接描述 回答者：tumain

- SagitSri