angular - ionic 3 : The pipe '' could not be found

标签 angular typescript ionic-framework pipe ionic3

<分区>

关于这个问题，我似乎没有任何错误。我已经导入了 app.module.ts 并将其放在“声明”中。

在 app.module.ts 中

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

//ionic-native
import { NativeStorage } from '@ionic-native/native-storage';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

//pipe
import { HoursMinutesSecondsPipe } from '../pipes/hours-minutes-
seconds/hours-minutes-seconds';

@NgModule({
declarations: [
MyApp,
HoursMinutesSecondsPipe
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
  platforms: {
    android: {
      tabsPlacement: 'top'
    }
  }
}),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
NativeStorage,
]
})
export class AppModule {}

用法:

    <ion-card class="card-container" (click)="onTimer()">
      <img src="assets/imgs/wp1.png"/>
      <div class="card-title">Time Smoke Free</div>
      <div class="card-subtitle">{{ seconds | hoursMinutesSeconds }}</div>
    </ion-card>

以小时-分钟-秒为单位

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

    @Pipe({
      name: 'hoursMinutesSeconds',
    })

    export class HoursMinutesSecondsPipe implements PipeTransform {

      transform(value, args?) {

        let minutes = Math.floor(value / 60);
        let hours = Math.floor(minutes / 60);
        let seconds = Math.floor(value % 60);

        let timeString = hours + 'hrs ' + minutes + 'mins ' + seconds + 'secs';

        return timeString;

      }
    }

错误: 未捕获( promise ):错误:模板解析错误: 找不到管道“hoursMinutesSeconds”(“imgs/wp1.png”/> 时间无烟 {{ [错误 ->] 秒 |小时分钟秒}}

最佳答案

当您使用此 CLI ionic generate pipe HoursMinutesSeconds 创建一个 pipe 时，它将创建一个名为 pipes.module.ts 的共享模块。因此，您需要在页面的模块文件中导入 PipesModule 模块。

那么让我们认为该页面是my-view；

my-view.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MyViewPage } from './my-view';
import { PipesModule } from '../../pipes/pipes.module';//<--- here

@NgModule({
  declarations: [
    MyViewPage,
  ],
  imports: [
    IonicPageModule.forChild(BudgetGroupViewPage),
    PipesModule // <--- here
  ],
})
export class MyViewPageModule { }

关于angular - ionic 3 : The pipe '' could not be found，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47576879/

上一篇：带有参数的Angular 5 Component输入函数

下一篇：angular - 使用 Angular 4.0 尝试 @ngrx/store 时出现错误 : No provider for Store!

相关文章：

angular - 如何在 Ionic Page 中定义可选的段参数？

node.js - 本地安装时，“Protractor ”不被识别为内部或外部命令

angular - 使用导入模块中的组件

javascript - typescript 未读取正确的类型

angular - typescript 导入错误的 Angular

android - 构建android apk，ionic 2项目时无法加载包装器属性

cordova - www/index.html 想使用您当前的位置 - Ionic Framework

angular - "Maximum call stack size exceeded"在 Angular 9 ng build --prod 中用于库

javascript - Angular5可以激活守卫:Types of property 'canActivate' are incompatible

typescript - AWS SecretsManager 值无法解析