带有角度自定义管道的离子 v4 不起作用

【问题标题】：ionic v4 with angular custom pipe not working带有角度自定义管道的离子 v4 不起作用
【发布时间】：2019-05-09 21:14:22
【问题描述】：

我在 ionic -v4 beta 中创建了一个管道来反转数组，使用 ionic 的 cmd，它无法在我使用的模板中显示解析器错误，我在下面给出示例 

ionic g pipe pipe/reverse

管道定义

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

@Pipe({
  name: 'reverse'
})
export class ReversePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.slice().reverse();;
  }

}

在代码中使用，生成管道

    <ion-card (dblclick)="delete(i)" *ngFor="let i of items | reverse">
    <div style=" height:250px;overflow: hidden;background-color: brown;">
      <img [src]="i.imageName"/> 
    </div>
    <ion-card-header>
        <ion-card-subtitle>{{i.timestamp|date:"medium"}}</ion-card-subtitle>
      <ion-card-title>
        {{i.amt  | currency:"₹":" ₹ "}}
        </ion-card-title>
  </ion-card-header>
    <ion-card-content>
      <p>
        {{i.discription.data}}

      </p>
    </ion-card-content>
  </ion-card>

显示错误

core.js:12501 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'reverse' could not be found ("
    </ion-item>
  </ion-list>
  <ion-card (dblclick)="delete(i)" *ngFor="l[ERROR ->]et i of items | reverse">
    <div style=" height:250px;overflow: hidden;background-color: brown;">
 "): ng:///HomePageModule/HomePage.html@48:44
Error: Template parse errors:
The pipe 'reverse' could not be found ("
    </ion-item>
  </ion-list>
  <ion-card (dblclick)="delete(i)" *ngFor="l[ERROR ->]et i of items | reverse">
    <div style=" height:250px;overflow: hidden;background-color: brown;">
 "): ng:///HomePageModule/HomePage.html@48:44
    at syntaxError (compiler.js:2547)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
    at compiler.js:24971
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
    at compiler.js:24881
    at Object.then (compiler.js:2538)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
    at syntaxError (compiler.js:2547)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
    at compiler.js:24971
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
    at compiler.js:24881
    at Object.then (compiler.js:2538)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:14051)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
defaultErrorLogger @ core.js:12501
push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:12549
next @ core.js:14528
schedulerFn @ core.js:10238
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47
push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:10222
(anonymous) @ core.js:14082
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:14019
onHandleError @ core.js:14082
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:392
push../node_modules/zone.js/dist/zone.js.Zone.runGuarded @ zone.js:154
_loop_1 @ zone.js:677
api.microtaskDrainDone @ zone.js:686
drainMicroTaskQueue @ zone.js:602
Promise.then (async)
scheduleMicroTask @ zone.js:578
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:297
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:252
scheduleResolveOrReject @ zone.js:862
resolvePromise @ zone.js:808
(anonymous) @ zone.js:724
webpackJsonpCallback @ bootstrap:25
(anonymous) @ home-home-module.js:1

注意：我在 app.module.ts 文件中添加了，也添加到了@ngModule 声明数组中

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 {AddEntryPage} from "./add-entry/add-entry.page";
import { AddEntrySecondPage } from './add-entry-second/add-entry-second.page';
import { AddEntryThirdPage } from './add-entry-third/add-entry-third.page';

import { Camera } from '@ionic-native/camera/ngx';
import { File } from '@ionic-native/file/ngx';
import { FormsModule } from '@angular/forms';
import { IonicStorageModule } from '@ionic/storage';
import { TruncatePipe } from './pipe/truncate.pipe';
import { ReversePipe } from './pipe/reverse.pipe';
@NgModule({
  declarations: [AppComponent,AddEntryPage,AddEntrySecondPage,AddEntryThirdPage, TruncatePipe, ReversePipe],
  entryComponents: [AddEntryPage,AddEntrySecondPage,AddEntryThirdPage],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FormsModule,IonicStorageModule.forRoot()],
  providers: [
    File,
    Camera,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent],
  exports:[ReversePipe]
})
export class AppModule {}

解决问题的正确方法，在此先感谢。

【问题讨论】：

  • 分享你的 app.module.ts
  • 我在 appmodule ts 中声明
  • import { ReversePipe } from './pipe/reverse.pipe'; @NgModule({ declarations: [AppComponent,AddEntryPage,AddEntrySecondPage,AddEntryThirdPage, TruncatePipe, ReversePipe], entryComponents: [AddEntryPage,AddEntrySecondPage,AddEntryThirdPage], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,FormsModule,IonicStorageModule.forRoot()], providers: [ File, Camera, StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy } ], bootstrap: [AppComponent], exports:[ReversePipe] })

标签： angular typescript ionic4


【解决方案1】：

最好有共享模块并在需要的地方注入它。这应该可以解决您的问题。

解释

最好的做法是共享包含通用指令、组件、管道等的模块。

这些模块声明和导出通用指令、组件、管道，以使它们可供任何其他模块使用。

共享模块

@NgModule({
  imports: [
    // dep modules
  ],
  declarations: [ 
    ReversePipe
  ],
  exports: [
    ReversePipe
  ]
})
export class SharedModule {}

用法

// other imports
import { SharedModule } from './{SharedModule-path}';   

@NgModule({
 imports: [
   ....
   SharedModule
 ],
 declarations: [],
 exports: []
})
export class FeaturedModule1 {}

【讨论】：

  • 显示错误 'SharedmoduleModule' 已声明，但其值从未被读取。 [6133] [ts] 找不到模块“../module/sharedmodule”。 [2307]
  • 创建共享模块的过程是什么
猜你喜欢
  • 2020-07-23
  • 2019-02-11
  • 1970-01-01
  • 2019-04-11
  • 1970-01-01
  • 2017-08-20
  • 2017-02-23
  • 2017-12-04
  • 2019-02-04
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode