88

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

找不到管道“actStatusPipe”

[错误->]{{data.actStatus | 行为状态管道}}

我尝试了两种方法，在 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 中搜索的解决方案，但是它们不起作用。

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

4

11 回答 11

111

看到这对我有用。

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

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

于 2016-11-07T10:53:16.183 回答
22

这对我没有用。（我使用 Angular 2.1.2）。我不必在 app.module.ts 中导入 MainPipeModule 并将其导入到我使用管道的组件也被导入的模块中。

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

于 2016-12-06T20:54:21.783 回答
16

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

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

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

奇怪的。

于 2020-08-21T13:32:23.603 回答
7

我对接受的答案没有任何问题，因为它确实对我有帮助。但是，在实施后，我仍然遇到同样的错误。

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

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

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

于 2020-01-14T11:28:47.860 回答
4 
import {CommonModule} from "@angular/common";

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

于 2018-09-09T16:17:57.307 回答
2

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

这不起作用：@Pipe({ name: 'plural' })❌，
但这样做：@Pipe({ name: 'pluralForm' })✅</p>

于 2021-03-11T11:16:50.987 回答
1

可以肯定的是，如果管道的声明是在一个模块中完成的，当您在另一个模块中使用管道时，您应该在当前模块中提供正确的导入/声明，这是您使用管道的类。就我而言，这就是管道未命中的原因

于 2019-08-06T17:08:44.880 回答
0

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

于 2018-08-26T07:00:53.953 回答
0

我遇到了类似的问题，但是将它放在我的页面模块中不起作用。

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

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

学分：在此处输入链接描述答案：tumain

于 2020-09-25T14:44:03.480 回答
0

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

  1. 将管道的模块（SharedModule）导入所需的模块。
  2. 在 providers 数组中添加自定义管道。 @NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}
于 2021-07-21T06:08:29.387 回答
0

请确保在使用管道时使用“选择器”。例如：

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 中的用法

于 2022-01-21T08:03:10.487 回答