【问题标题】:Custom Pipe Ionic 3 | Pipe Not Found自定义管道离子 3 |未找到管道
【发布时间】:2018-06-13 14:14:55
【问题描述】:

我需要帮助,我在 Ioni 3 中遇到管道问题,我一直在关注此线程 Ionic 3 cant find Pipe 和此链接 Ionic 3 Pipe Globally 但仍然没有运气,我得到的只是管道分隔符不起作用,我正在使用 ionic 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 {}

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

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

【问题讨论】:

  • 您真的需要管道和页面的模块文件吗?
  • @pareshGami 我只是按照我提供的两个链接的说明,我必须使用模块文件作为管道,但仍然没有运气找不到在 ionic 3 中调用自定义管道的方法

标签: typescript ionic-framework ionic3


【解决方案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}}

【讨论】:

  • 它的工作,天哪,我已经为此苦苦挣扎了 2 天,非常感谢,但你能解释一下发生了什么吗??
  • 酷!很高兴能帮助你。!当您使用 ionic 3 时,不要使用模块化概念,因为在 --prod 模式下创建构建时会导致错误。 Ionic 生成模块但在 prod 标志不起作用后为什么真的不知道
  • aah 我明白这就是为什么 =-="它总是导致错误..感谢您的回答和解释
  • 在模块中使用管道,就像ionic generate 所做的那样,即使使用--prod 标志也可以正常工作。
  • 谢谢!像魅力一样工作。无论如何,我的编辑器 Visual Code 仍然抛出错误......“[Angular] 找不到管道'反向'”。但它的工作! :)
猜你喜欢
  • 2023-04-09
  • 2016-12-24
  • 2018-05-14
  • 1970-01-01
  • 2017-03-20
  • 2020-07-23
  • 2018-11-25
  • 2017-04-16
  • 1970-01-01
相关资源
最近更新 更多