定制管离子3 |找不到管道

时间:2018-01-03 21:20:00

标签: typescript ionic-framework ionic3

我需要帮助,我在Ioni 3中遇到管道问题,我一直在关注此帖子Ionic 3 cant find Pipe和此链接Ionic 3 Pipe Globally 但仍然没有运气我得到的是管道分离器不起作用,我正在使用离子g管道分离器生成我的管道我在我的html中使用我的管道

{{string | separator}}

我的separator.ts(自定义管道)

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

/**
 * Generated class for the SeparatorPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'separator',
})
export class SeparatorPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    return value.toLowerCase();
  }
}

我的pipe.module.ts

import { NgModule } from '@angular/core';
import { SeparatorPipe } from './separator/separator';
@NgModule({
    declarations: [SeparatorPipe],
    imports: [],
    exports: [SeparatorPipe]
})
export class PipesModule {}

my page.module.ts

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

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

知道为什么它不起作用吗?

Image Eror Pipe Ionic 3

1 个答案:

答案 0 :(得分:11)

第1步:ionic g pipe separator

这里离子发生器src / pipes / pipes.module.ts => Delete该文件。

第2步:Import文件中的app.module.ts管道

import { SeparatorPipe } from '../pipes/separator/separator';

declarations: [
    ...
    SeparatorPipe
    ...
  ],

步骤3:只需在页面中使用管道,如

{{'STACKOVERFLOW' | separator}}