angular - 导入自定义管道 Ionic 4
问题描述
我正在使用 Ionic 5.2.7 并使用 Pipes.Module 创建一个自定义管道图标类别(我真的没有在任何地方使用它)并且我试图在我的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)
我不知道我做错了什么。也许我需要在某处导入管道模块。
现在我以这种方式拥有我的模块、页面和管道......
图标-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>
解决方案
如果您想为您的管道创建一个模块,您需要在该模块中声明和导出管道,然后将该模块导入您需要的其他模块中
推荐阅读
- python - 如何在 django 中修复双重 for 循环
- amazon-web-services - 如何清除 AWS Lambda 缓存(或强制冷启动)
- javascript - 如何让 React 功能组件呈现连续的空格字符?
- python - 如何从 macOS 终端中删除“插件”?(zsh)
- python - Python TCP Select()在没有终止的情况下不为浏览器提供服务
- python - 一周与一天 python 的 seaborn 热图
- javascript - 如何增加圆环图或饼图的大小并将图例保留在图表JS中?
- javascript - 创建自定义音频播放器时如何第一次播放音频
- swift - 使用完成处理程序后 Swift 数组显示为空
- unity3d - Unity3D 列表错误 - 索引超出范围。必须是非负数且小于集合的大小