2017-04-08 19 views
11

właśnie uaktualniony do Ionic 3.0.1 więc mogę używać LazyLoading, a ponieważ, że nie mogę korzystać z mojego zwyczaju Pipes:Ionic-3 nie można znaleźć potoku

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

aw app.module.ts Dodałem go do deklaracje:

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

teraz gdy próbuję użyć go w nim błędów html szablon:

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/[email protected]:17 

Czy jest tu coś, czego mi brakuje?

+0

Mam podobny błąd, ponieważ migracji: Nie można odnaleźć nazwy „PipeTransform” – jug

Odpowiedz

18

więc naprawiłem ten problem, dokonując PipesModule gdzie mogę zaimportować zwyczaj Pipes się, a następnie zaimportować je na stronie module.ts że chcę go używać na

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

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

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

a następnie na stronie | HomePage jako przykład:

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

i wyszło dobrze, nie jestem pewien, czy jest to właściwy sposób, czy nie, ale to działało w porządku, proszę dać mi znać, jeśli istnieje lepszy sposób ... dzięki!

+2

To działa, ale wymaga dodawania do każdego 'PipesModule'' Page.module.ts' –

+0

@AmrElAdawy wydaje się być sposobem Angular4 chce, abyśmy podążali, nie jestem pewien! – Abanoub

9

Co trzeba zrobić, to po prostu zaimportować PipesModule (linia 12 w poniższym fragmencie) do każdych swoich page.module.ts pliku (tj 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 { } 

To zadziałało dla mnie.

+1

To powinna być zaakceptowana odpowiedź. – wmehanna

+0

Co zrobić, jeśli używasz potoku w komponencie zamiast strony? –