web-dev-qa-db-fra.com

Ionic-3 Can't find Pipe

Je viens de passer à Ionic 3.0.1 pour pouvoir utiliser LazyLoading, et depuis, je ne peux pas utiliser mon Pipes personnalisé:

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

@Pipe({
  name: 'StripHTML'
})

export class StripHTML implements PipeTransform {

  transform(value, args) {
    let striped = value.replace(/(<([^>]+)>)/g, "");

    if (args != null) {
      if (args.split != null) {
        striped = striped.split(args.split);
        if (args.index != null) {
          striped = striped[args.index];
        }
      }
    }

    return striped;
  }
}

et en app.module.ts Je l'ai ajouté aux déclarations:

@NgModule({
  declarations: [
    ........,
    StripHTML
  ],
...

maintenant, lorsque j'essaie de l'utiliser dans le modèle html, il génère des erreurs:

core.es5.js:1085 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'StripHTML' could not be found ("
          <ion-card-content>
            <ion-card-title style="font-size: 100%">
              {{ [ERROR ->]product.title | StripHTML }}
            </ion-card-title>
          </ion-card-content>
"): ng:///HomeModule/Home.html@33:17

y a-t-il quelque chose qui me manque ici?

angulartypescriptionic-frameworkionic3
17
Abanoub

j'ai donc résolu ce problème en créant un PipesModule où j'importe mon Pipes personnalisé, puis l'importe dans la page module.ts sur lequel je veux l'utiliser

import { NgModule } from '@angular/core';
import { StripHTML } from './strip-html';

@NgModule({
  declarations: [
    StripHTML,
  ],
  imports: [

  ],
  exports: [
    StripHTML
  ]
})
export class PipesModule { }

puis dans la page | HomePage comme exemple:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Home } from './home';

import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
  declarations: [
    Home,
  ],
  imports: [
    IonicPageModule.forChild(Home),
    PipesModule
  ],
  exports: [
    Home
  ]
})
export class HomeModule { }

et cela a bien fonctionné, je ne sais pas si c'est la bonne façon ou non, mais cela a bien fonctionné, faites-moi savoir s'il existe une meilleure façon ... merci!

28
Abanoub

Ce que vous devez faire est simplement importez le PipesModule (ligne 12 dans l'extrait ci-dessous) dans votre chaque fichier page.module.ts (c'est-à-dire home.moodule.ts) ....

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { LoginPage } from './login';
import { PipesModule } from '../../pipes/pipes.module';

@NgModule({
    declarations: [
        LoginPage,
    ],
    imports: [
        IonicPageModule.forChild(LoginPage),
        PipesModule
    ]
})
export class LoginPageModule { }

Cela a fonctionné pour moi.

18
Foram Sangani