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

找不到管道"actStatusPipe"

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

我try 了两种方式,在app.module的声明中声明:

app.module e.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
        }
    }
}

我想和这份文件差不多(实际上,我只是复制了一份文件,做了一点修改)

我的Angular 2的版本是2.1.

许多可以在StackOverflow和Google中搜索的解决方案都在我的应用程序中try 过,但都不起作用.

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

推荐答案

看,这对我很管用.

首先这是我的烟斗

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模块中,我需要声明我的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]
})

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

  1. 创建管道.
  2. 创建单独的模块并声明和导出一个或多个管道.
  3. 使用那个管道模块.

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).

Angular相关问答推荐

如何制作angular.dev动画?

如何并行执行多个API调用并在响应到达Angular中的HTTP服务时处理响应?

Angular material 输入字段中的图标未显示

无法绑定到ngIf,因为它不是dis angular 17的已知属性

如何避免使用CSS动画制作的幻灯片中闪烁?

Angular v12:Uncatch(in promise):ReferenceError:d3 is not defined ReferenceError:d3 is not defined

Angular前端调用ALB身份验证后的后端并重定向

FormArray包含嵌套的FormGroups.如何访问嵌套的表单组控件?

以17角表示的自定义元素

Angular 17不接受带点(.)的路径在开发环境中,它直接抛出一个404错误

对Angular 为17的路径使用AuthGuard

如何修复不允许的HttpErrorResponse 405?

如何检测 Angular Universal 预渲染版本?

多个 Mat Paginator 在 Angular 组件中不起作用

有条件地取消所有内部可观察对象或切换到仅发出一个值的新对象

在一个组件中创建多个表单

将数组传递给 URLSearchParams,同时使用 http 调用获取请求

Angular2延迟加载模块错误'找不到模块'

交替行 colored颜色 angular material表

Angular 2 单元测试 - 出现错误无法加载ng:///DynamicTestModule/module.ngfactory.js