Angular2：找不到自定义管道

Question

内置管道可以工作，但我想使用的所有自定义管道都是相同的错误：

the pipe 'actStatusPipe' could not be found

[ERROR ->]{{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],
})

但是 none 它们在我的应用程序中有效。

这是我的管道代码：

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.

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

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

您可以直接在该模块中使用管道。但是如果你觉得你的管道在不止一个组件中使用，我建议你遵循我的方法。

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

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

Answer 2

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

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

Answer 3

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

Answer 4

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

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

Answer 5

请确保，如果管道的声明是在一个模块中完成的，而您在另一个模块中使用管道，则您应该在当前模块中提供正确的 imports/declarations，class 你在哪里使用管道。在我的例子中，这是管道未命中的原因

Answer 6

我对已接受的答案没有异议，因为它确实对我有帮助。但是执行之后，还是报同样的错误

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

我的自定义-pipe.ts 文件：

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

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

{{ myData | doSomethingPipe }}

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

{{ myData | doSomething }}

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

Answer 7

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

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

对我来说，none 的其他建议有效，但只需停止，然后重新启动“ng serve”就足以使错误消失。

奇怪。

Answer 8

I encountered a similar issue, but putting it in my page’s module didn’t work.

我创建了一个需要管道的组件。此组件在 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

我遇到了类似的问题 issue.Mine 解决了:-

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

Answer 11

请确保您在使用管道时使用 'selector'。例如：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'removeApos'
})
export class RemoveAposPipe implements PipeTransform {
  transform(value: unknown, ...args: unknown[]): unknown {
    return null;
  }
}

您需要将其用作

<div>{{someval | removeApos}}</div>

请注意上面示例中的选择器及其在 div

中的用法

Angular2：找不到自定义管道

Angular2: custom pipe could not be found

angular2-pipe

angular