web-dev-qa-db-fra.com

Ionic 3: Le tube '' est introuvable

Je ne peux pas sembler une erreur concernant ce problème. J'importe déjà dans app.module.ts et le mets dans 'declaration'.

dans 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 {}

Usage:

    <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>

en heures-minutes-secondes.ts

    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;

      }
    }

Erreur: non capturée (en promesse): erreur: erreurs d'analyse de modèle: le canal 'hoursMinutesSeconds' est introuvable ("imgs/wp1.png" /> Time Smoke Free {{[ERROR ->] seconds | hoursMinutesSeconds}}

angulartypescriptionic-frameworkpipeionic3
10
latecoder

Lorsque vous créez un pipe à l'aide de cette CLI ionic generate pipe HoursMinutesSeconds cela va créer un module partagé appelé pipes.module.ts. Vous devez donc importPipesModule module dans le fichier de module de votre page.

Imaginons que cette page soit my-view puis;

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 { }
24
Sampath