在 Ionic 3 的组件中使用 Pipe 不起作用答案

【问题标题】：Using Pipe in a component in Ionic 3 does not work在 Ionic 3 的组件中使用 Pipe 不起作用
【发布时间】：2019-03-17 05:50:37
【问题描述】：

我创建了一些可重用的组件，可以在需要使用管道的其他页面中使用。但是，当我尝试导入管道时，html 不知道。它在下面返回一个错误。

错误：模板解析错误：找不到管道“图像”

我知道在 Pages 中使用管道是可行的，但是如何使用管道处理组件？

进一步解释这一点。我有一个名为 accounts.ts 的页面，该页面使用了 <orders> component，我将其呈现为这样。

 <orders (viewOrder)="viewAccount($event)" [orders]="orderCancelled" *ngIf="accountsHasLoaded"></orders>

我在该页面的ngModule 中声明了这一点。

@NgModule({
  declarations: [
    AccountPage,
  ],
  imports: [
    PipesModule,
    NgCalendarModule,
    ComponentsModule,
    IonicPageModule.forChild(AccountPage),
  ],
})

这是 accounts 页面的 ngModule，将使用 orders 组件。

下面是我的 component.ts

中的代码

@Component({
  selector: 'orders',
  templateUrl: 'orders.html',
  providers: [
    ImagePipe
  ]
})

当我将提供程序中的 ImagePipe 替换为 PipesModule 时，它仍然不起作用。

在我的html

中

  <img [src]="order?.client?.image?.url | image: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

管道图像适用于页面，但是当我尝试在组件中使用它时它不起作用。

这是我的管道模块下面

import { NgModule } from '@angular/core';
import { ChatDatePipe } from './chat-date/chat-date';
import { MomentPipe } from './moment/moment';
import { DatepickerFormatPipe } from './datepicker-format/datepicker-format';
import { ImagePipe } from './image/image';
@NgModule({
    declarations: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    imports: [],
    exports: [
        ChatDatePipe,
        MomentPipe,
        DatepickerFormatPipe,
        ImagePipe
    ],
    providers: [
        ImagePipe
    ]
})
export class PipesModule { }

如果有人可以提供帮助，我们将不胜感激。提前致谢。

【问题讨论】：

发布您的图像管道代码
您是否尝试使用“ionic generate pipe”命令并查看默认实现如何工作？

标签： angular ionic-framework ionic3 pipe components

【解决方案1】：

你需要在模块声明中声明管道：

declarations: [ ImagePipe ],
providers: [ImagePipe ]

【讨论】：

它在组件中声明它时返回此错误。 Argument of type '{ selector: string; templateUrl: string; declarations: undefined[]; providers: (typeof ImagePipe)[]; }' is not assignable to parameter of type 'Component'. Object literal may only specify known properties, and 'declarations' does not exist in type 'Component'.
抱歉，我编辑了问题，将其声明为提供者，但仍然无法正常工作。
事实证明我没有在组件中使用延迟加载，因为使用ionic g component namehere 生成了离子命令。所有这些都有一个 component.module。当我导入它时，它现在适用于每个组件。但我认为这是一个不好的做法？我应该延迟加载我的组件吗？

【解决方案2】：

你可以试试这个试试这个：

<img [src]="order?.client?.image?.url | ImagePipe: 'original'" onError="this.src='assets/imgs/No_Image_Available.jpg';">

您的管道称为 ImagePipe，而不是图像。

如果这不起作用，请发布您的 ImagePipe 代码

【讨论】：

【解决方案3】：

只需执行以下检查

1.检查您是否提供了所需的管道名称。

@Pipe({ name: 'image' })
export class ImagePipe {

}

2.你已经在模块中声明了管道

   @NgModule({
      declarations: [
        ImagePipe,
      ],
    })

【讨论】：

确保您在正确的“模块”中声明管道
订单生成组件没有模块。我像这样在 PipesModule 中声明它。 @NgModule({ declarations: [ ChatDatePipe, MomentPipe, DatepickerFormatPipe, ImagePipe ], imports: [], exports: [ ChatDatePipe, MomentPipe, DatepickerFormatPipe, ImagePipe ], providers: [ ImagePipe ] }) export class PipesModule { }

【解决方案4】：

这是在 Ionic 框架的组件中使用管道的方式：

代码用于 mycomponent.ts 文件：

import { Component, Input } from '@angular/core';

import { MyPipe } from '../../pipes/mypipe/mypipe';

@Component({
  selector: 'mycomponent',
  templateUrl: 'mycomponent.component.html',
  providers: [ MyPipe ]
})
export class MyComponent {

@Input() param: string;  

  constructor( private myPipe: MyPipe) {

  }

  getFilename( value: string ) {
    return this.myPipe.transform(value);
  } 

}

在你的 mycomponent.html 文件中：

<div>
    <img src="assets/imgs/svg/{{ getFilename(param) }}.svg">
</div>

你调用的方法用大括号括起来

【讨论】：