Angular2:找不到自定义管道


79

内置管道是可行的,但是我要使用的所有自定义管道都是相同的错误:

找不到管道'actStatusPipe'

[错误->] {{data.actStatus | actStatusPipe}}

我尝试了两种方法,在app.module的声明中进行声明:

app.module.ts:

import {ActStatusPipe} from '../pipe/actPipe'

@NgModule({
    declarations: [
        AppComponent,
        HomePage,
        ActivitiesList,
        ActStatusPipe
    ],
    ...
})

或使用其他模块声明并导出我的所有管道:// pipe

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

这让我很困惑,谢谢您的回答!


你能在塞子上重现吗?
yurzui

您的代码中也有很多混乱。首先,尝试简化操作,创建自定义管道并添加声明:NgModule()的[AppComponent,CapitalizePipe]数组。比让我知道它正在工作?
Vinay Pandya

@yurzui我会在下班后尝试

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

我刚刚复制了您的烟斗,它对我
有用

Answers:


95

看到这对我有用。

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

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


16
最终我发现这是因为我在根模块上导入了管道,并在其他模块导入的组件中使用了它。我只是认为它之前可以在全局范围内工作,而错误是由我的管道引起的。您的回答激励着我找出答案,谢谢您的帮助!

@rui您的评论挽救了我的生命。.我也遇到了同样的问题..哈哈哈
Shashank Gaurav

@rui与上述相同,您的评论救了我
GBarroso

3
@Rui,您能否更清楚地了解如何解决此问题。
Rhyous

1
不需要将管道添加到其自己的模块-这只是一种选择。官方文档(angular.io/guide/pipes#custom-pipes)说,必须声明提供Pipes ,因此它可以被注入
ykadaru

21

这没有为我工作。(与Angular 2.1.2兼容)。我不必在app.module.ts中导入MainPipeModule,也可以将其导入到使用管道的组件Im导入的模块中。

看起来如果您的组件是在另一个模块中声明并导入的,则您也需要在该模块中包含PipeModule。


4
什么?这是没有意义的。像这样的东西没有全球进口吗?
菲尔(Phil)

但是如果您需要将其导入2个模块怎么办?我发现那行不通。我收到控制台错误,说要在更高的模块中使用它,而不是在2个模块中使用,但是应用程序模块
无法解决问题

是的,这是Angular的工作方式,但是如果要在整个Angular应用中使用该管道模块,则可以导入app.module.ts;如果要在特定模块中使用该管道,则需要在该模块中导入管道模块只要。
Vinay Pandya,

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

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


1
“通过导入正确的模块可以解决90%的角度(材料)问题”
Valen

2
90%的角度问题是由不良文档引起的
Ray Andison

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

愚蠢的错误,但这花了我很多时间。希望这可以帮助!


3

一个非常愚蠢的答案(我会在一分钟内自行否决),但这对我有用:

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

对我而言,其他建议均无效,只是停止然后重新启动“ ng serve”就足以使错误消失。

奇怪。


这完全对我
有用

0

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



0

我遇到了类似的问题,但是将其放在页面的模块中却无法正常工作。

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

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

积分:在此处输入链接描述答案:tumain

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.