Angular2：找不到自定义管道

Posted 2023-02-22

【中文标题】Angular2：找不到自定义管道

【英文标题】：Angular2: custom pipe could not be found

【发布时间】：2017-03-20 08:35:02

【问题描述】：

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

找不到管道“actStatusPipe”

[错误->]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。

在我的应用程序中尝试了很多可以在 *** 和 google 中搜索的解决方案，但是它们不起作用。

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

【问题讨论】：

你能在 plunker 上重现它吗？

你的代码也有很多混乱。首先尝试让它变得简单，创建自定义管道并添加声明：NgModule() 的 [AppComponent, CapitalizePipe] 数组。而不是让我知道它正在工作？

@yurzui 我会在下班后尝试

@VinayPandya 错误消息如下：模板解析错误：找不到管道'actStatusPipe'

我刚刚复制了你的管道，它对我有用

【参考方案1】：

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

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

【讨论】：

在不需要时，建议不要再将 'providers: [ ] ' 数组用于服务和管道之类的东西。应该只导入和声明自定义管道。

【参考方案2】：

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

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

【讨论】：

拜托，不要问我花了多长时间才知道...

【参考方案3】：

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

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

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

致谢：enter link description here 答案：tumain

【参考方案4】：

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

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

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

奇怪。

【参考方案5】：

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

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

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

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

【参考方案6】：

看看这对我有用。

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
    
  

ma​​in-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]
)

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

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

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

【讨论】：

最后我发现这是因为我在根模块导入管道，并在其他模块的组件导入中使用它。我只是认为它之前会在全局范围内工作，这个错误是由我的管道。您的回答激发了我的灵感，感谢您的帮助！

@rui 你的评论拯救了我的一天。我也遇到了同样的问题。哈哈哈

@rui 同上，你的评论救了我

@Rui，你能不能说清楚你是怎么解决这个问题的。

向自己的模块添加管道不是必需的 - 它只是一种替代方法。官方文档 (angular.io/guide/pipes#custom-pipes) 说 Pipes 必须声明和提供，因此它可以可注入。

【参考方案7】：

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

【参考方案8】：

import CommonModule from "@angular/common";

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

【讨论】：

"90% 的角度（材料）问题通过导入正确的模块得到解决"

90% 的角度问题是由糟糕的文档造成的

【参考方案9】：

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

【参考方案10】：

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

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

【讨论】：

什么？这是没有意义的。像这样的东西没有全局导入吗？

但是如果您需要在 2 个模块中导入它怎么办？我发现那行不通。我收到一个控制台错误，说要在更高的模块而不是 2 个模块中使用它，但是 app 模块不起作用

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