【问题标题】:Ionic-3 Can't find PipeIonic-3 找不到管道
【发布时间】:2017-09-04 02:33:39
【问题描述】:

我刚刚升级到Ionic 3.0.1,所以我可以使用LazyLoading,因此我不能使用我的自定义Pipes

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

app.module.ts 中,我已将其添加到声明中:

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

现在当我尝试在 html 模板中使用它时会出错:

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

这里有什么我遗漏的吗?

【问题讨论】:

  • 自迁移以来我遇到了类似的错误:找不到名称“PipeTransform”

标签: angular typescript ionic-framework ionic3


【解决方案1】:

您需要做的只是将 PipesModule(sn-p 下面的第 12 行)导入到您的每个 page.module.ts(即 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 { }

这对我有用。

【讨论】:

  • 如果您在组件中使用管道而不是页面怎么办?
  • @EricG 您也可以在ComponentsModule 中导入PipesModule
【解决方案2】:

所以我通过创建一个PipesModule 来解决此问题,我将自定义Pipes 导入其中,然后将其导入我想使用它的页面module.ts

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

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

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

然后在页面|以HomePage为例:

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

它确实工作正常,不确定这是否是正确的方法,但它工作正常,如果有更好的方法请告诉我......谢谢!

【讨论】:

  • 这可行,但它需要将PipesModule 添加到每个Page.module.ts
  • @AmrElAdawy 这似乎是 Angular4 希望我们遵循的方式,还不确定!
猜你喜欢
  • 2019-05-31
  • 2023-04-09
  • 1970-01-01
  • 2020-12-04
  • 2020-09-07
  • 2018-10-11
  • 2017-11-27
  • 2018-05-14
  • 2019-05-07
相关资源
最近更新 更多