Question

我正在使用Ionic 5.2.7并使用 Pipes.Module 创建一个自定义管道 icons-category （我真的不在任何地方使用它），正在尝试在我的 modal-icon-expenses.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>

Answer 1

如果要为管道使用模块，则需要在该模块中声明并导出管道，然后将该模块导入所需的其他模块中

请参见此工作示例https://stackblitz.com/edit/angular-dwkjch

导入自定义管道Ionic 4

1 个答案: