Ionic-3 找不到管道

Posted 2023-03-13

【中文标题】Ionic-3 找不到管道

【英文标题】：Ionic-3 Can't find Pipe

【发布时间】：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”

【参考方案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 希望我们遵循的方式，还不确定！