导入自定义管道 Ionic 4答案

【问题标题】：Import custom pipe Ionic 4导入自定义管道 Ionic 4
【发布时间】：2019-09-09 18:55:59
【问题描述】：

我正在使用 Ionic 5.2.7 并使用 Pipes.Module 创建一个自定义管道 icons-category（我真的没有在任何地方使用它）并且我'正在尝试在我的 modal-icon- costs.page 中使用它，但是当我使用它时出现此错误。

Uncaught Error: Template parse errors:
The pipe 'iconsCategoria' could not be found ("

        <ion-row>
            <ion-col size="6" *ngFor="let im[ERROR ->]agen of iconPath | iconsCategoria:'asdasd'">
                <ion-item button="true" color="aqua" lin"): ng:///ComponentsModule/ModalIconGastosPage.html@6:44
    at syntaxError (compiler.js:2175)
    at TemplateParser.parse (compiler.js:11188)
    at JitCompiler._parseTemplate (compiler.js:25721)
    at JitCompiler._compileTemplate (compiler.js:25709)
    at compiler.js:25653
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.js:25653)
    at compiler.js:25566
    at Object.then (compiler.js:2166)
    at JitCompiler._compileModuleAndComponents (compiler.js:25565)

我不知道我做错了什么。也许我需要在某处导入管道模块。

现在我以这种方式拥有我的模块、页面和管道......

icons-categoria.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'iconsCategoria'
})
export class IconsCategoriaPipe implements PipeTransform {

  transform(iconsArray: any [], categoria?: string): any[] {

    console.log(categoria);

    return iconsArray;
  }

}

modal-icon-gastos.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { ModalIconGastosPage } from './modal-icon-gastos.page';
import { ComponentsModule } from '../../../Components/components.module';
import { IconsCategoriaPipe } from '../../../Pipes/icons-categoria.pipe';

const routes: Routes = [
  {
    path: '',
    component: ModalIconGastosPage
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ComponentsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  providers: [
    IconsCategoriaPipe
  ],
  declarations: [ModalIconGastosPage, IconsCategoriaPipe],
})
export class ModalIconGastosPageModule {}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
import { ComponentsModule } from './Components/components.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ReactiveFormsModule, FormsModule, ComponentsModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports: []
})
export class AppModule {}

modal-icon-gastos.page.html

<app-header [titulo]="'Elegí un Icono'"></app-header>

<ion-content color="aqua">
    <ion-grid fixed>

        <ion-row>
            <ion-col size="6" *ngFor="let imagen of iconPath | iconsCategoria:'asdasd'">
                <ion-item button="true" color="aqua" lines="none">
                    <img class="galeria icono" src="/assets/icons/{{imagen.path}}">
                </ion-item>
            </ion-col>
        </ion-row>

    </ion-grid>
</ion-content>

【问题讨论】：

看来你做的一切都是正确的，你能为此创建一个堆栈闪电战吗？
抱歉，我是第一次使用 Stackblitz，对您有帮助吗？ stackblitz.com/github/EtcGonza/ControlGastos
是的，有些方法，您不需要导入整个项目，您只需创建一些组件来重现您的问题，无论如何，您的代码不同，您没有添加管道到您的管道模块提供商，而且您没有在 appModule（或任何其他模块）中导入 pipeModule
我的 Pipemodule 没有在任何地方导入。但是我的管道它被导入到我的 PipeModule 中。我的管道是在 modal-icon-gastos.module.ts 中导入的，然后我在 modal.icon-gastos.html 中使用它。
那么同样的模块也应该提供它

标签： angular pipe ionic4

【解决方案1】：

如果您想为您的管道创建一个模块，您需要在该模块中声明和导出管道，然后将该模块导入您需要的其他模块中

请看这个工作示例https://stackblitz.com/edit/angular-dwkjch

【讨论】：