Angular2: 找不到自定义管道

内置管道是工作，但所有自定义管道，我想使用的是同一个错误:

找不到“ actStatusPipe”管道

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

我尝试了两种方法，在 app.module 的声明中声明它:

应用程序模块:

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 和谷歌在我的应用程序尝试，但他们不工作。

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

140242 次浏览
小开
最佳答案

see this is working for me.

ActStatus.pipe.ts First this is my 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 in pipe module, i need to declare my pipe/s and export it.

    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 user this pipe module in any module.

    @NgModule({
declarations: [...],
imports: [..., MainPipe], // <---
providers: [...],
bootstrap: [AppComponent]
})

you can directly user pipe in this module. but if you feel that your pipe is used with in more than one component i suggest you to follow my approach.

  1. create pipe .
  2. create separate module and declare and export one or more pipe.
  3. user that pipe module.

How to use pipe totally depends on your project complexity and requirement. you might have just one pipe which used only once in the whole project. in that case you can directly use it without creating a pipe/s module (module approach).

小开

This didnt worked for me. (Im with Angular 2.1.2). I had NOT to import MainPipeModule in app.module.ts and importe it instead in the module where the component Im using the pipe is imported too.

Looks like if your component is declared and imported in a different module, you need to include your PipeModule in that module too.

小开

If you are declaring your pipe in another module, make sure to add it to that module Declarations and Exports array, then import that module in whatever module is consuming that pipe.

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

Adding this statement to the pipe module solved my problem.

小开

be sure, that if the declarations for the pipe are done in one module, while you are using the pipe inside another module, you should provide correct imports/declarations at the current module under which is the class where you are using the pipe. In my case that was the reason for the pipe miss

小开

I take no issue with the accepted answer as it certainly helped me. However, after implementing it, I still got the same error.

Turns out this was because I was calling the pipes incorrectly in my component as well:

My custom-pipe.ts file:

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

So far, so good, but in my component.html file I was calling the pipes as follows:

\{\{ myData | doSomethingPipe }}

This will again throw the error that the pipe is not found. This is because Angular looks up the pipes by the name defined in the Pipe decorator. So in my example, the pipe should instead be called like this:

\{\{ myData | doSomething }}

Silly mistake, but it cost me a fair amount of time. Hope this helps!

小开

A really dumb answer (I'll vote myself down in a minute), but this worked for me:

After adding your pipe, if you're still getting the errors and are running your Angular site using "ng serve", stop it... then start it up again.

For me, none of the other suggestions worked, but simply stopping, then restarting "ng serve" was enough to make the error go away.

Strange.

小开

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

I had created a component, which needed a pipe. This component was declared and exported in a ComponentsModule file, which holds all of the app’s custom components.

I had to put my PipesModule in my ComponentsModule as an import, in order for these components to use these pipes and not in the page’s module using that component.

Credits: enter link description here Answer by: tumain

小开

Also make sure your pipe name (inside the decorator) is v̲i̲s̲i̲b̲l̲y camelCased.

This does not work: @Pipe({ name: 'plural' }) ❌,
but this does: @Pipe({ name: 'pluralForm' }) ✅

小开

I faced similar issue.Mine got resolved by :-

  1. Importing the pipe's module(SharedModule) into the required module.
  2. Add the custom pipe in the providers array. @NgModule({ imports: [ SharedModule ], providers: [CustomPipe] )}
小开

Please make sure you're using the 'selector' while using th pipe. for eg:

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

you need to use this as

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

please note the selector in the above eg and its usage in the div


提交答案