Ionic 4 - 找不到管道答案

【问题标题】：Ionic 4 - Pipe could not be foundIonic 4 - 找不到管道
【发布时间】：2019-05-31 22:27:34
【问题描述】：

我有 2 页要使用自定义管道。我在 src/app 中创建了一个名为管道的文件夹。并创建了一个文件pipes.module.ts

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

我从我的第一个组件模块文件中导入它 devices.module.ts

import { PipesModule } from '../pipes/pipes.module';

@NgModule({
  imports: [
    ...
    PipesModule
  ],
  declarations: [DevicesPage, ]
})
export class DevicesPageModule {}

当我使用管道时，这个组件运行良好。

但我也有另一个组件。 home.module.ts

import { PipesModule } from '../pipes/pipes.module'

@NgModule({
  imports: [
    PipesModule,
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    ComponentsModule,
    MatPaginatorModule,


  ],
  declarations: [HomePage]
})
export class HomePageModule {}

我用按钮从设备页面调用主页。但是当我点击按钮时出现错误。

pipes.module.ts;

import { NgModule } from '@angular/core';
//import custom pipes here
@NgModule({
    declarations: [
        TranslatePipe
    ],
    imports: [],
    exports: [
        TranslatePipe
    ]
})
export class PipesModule {}

【问题讨论】：

标签： ionic-framework ionic4

【解决方案1】：

我在 ionic-V4 应用程序中遇到了同样的问题。我这样解决了我的问题。看到这段代码你就知道了。我从 app.module.ts 文件中删除了管道。

使用以下命令创建一个新管道：

ionic g pipe translatePipe

然后将此管道导入到 home.module.ts 文件中。

import { FirstCapsPipe } from '../first-caps.pipe';

然后将其包含在 home.module.ts 文件的声明中。

declarations: [HomePage, FirstCapsPipe]

home.html

<h2>{{data|translatePipe}}</h2>

希望对你有帮助:)

【讨论】：

【解决方案2】：

1) 首先，在 src/app 文件夹（在 app 文件夹中）创建管道文件夹。

2) 其次，在 cmd "ionic generate pipe pipelines/searchfilter" => 这将在管道中生成两个文件。

3 第三，在管道文件夹中创建名为“pipes.module.ts”的文件并将以下代码写入 => "pipes.module.ts"

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SearchfilterPipe } from './searchfilter.pipe';  //our pipe which we generate

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [SearchfilterPipe],
  exports: [SearchfilterPipe]
})
export class PipesModule { }

现在我们有了 PipesModule，我们可以生成更多管道并将它们写入管道模块。我们将只导入 PipesModule 而不是所有管道。

4) 你不必在 app.module.ts 中导入 PipesModule

5) 现在转到您要使用管道的页面并打开例如“anasayfa.module.ts” 并导入“PipesModule”并将其写入@ngModel 导入（它将自动创建）请注意，您会将 PipesModule 导入到 something.MODULE.TS 而不是 something.page.ts

【讨论】：

【解决方案3】：

Ionic 4 解决方案：

这就是我在 Ionic 4 中使用自定义管道的方式：

在 app 目录中的 pipes 文件夹中创建了自定义管道，使用： ionic g pipe plural-singular

注意：您可以在项目目录中的任意位置创建管道，但为了组织起见，我建议将其放在 pipes 目录中。 p>

在我想使用该管道的页面模块中，我导入了管道并在providers和declarations下指定了它，如下所示：

all.module.ts

import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        IonicModule,
        RouterModule.forChild(routes)
    ],
    providers: [
        PluralSingularPipe //---> Here 
    ],
    declarations: [PluralSingularPipe] //---> And here
})

在我想使用管道的页面的 TS 文件 中导入管道，如下所示：

all.page.ts

import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';

在同一页面的constructor中声明了管道，如下：

all.page.ts

constructor(public pluralSingular: PluralSingularPipe) {}

在我的 HTML 文件中使用它，如下所示：

all.page.html

{{ numberOfRecords | pluralSingular: 'coupon' : 'coupons' }}

就是这样！

好奇者：如果有帮助，这里是我的 package.json 文件版本：

"@ionic/angular": "^4.7.1",
"@angular/core": "~8.1.2",

【讨论】：

【解决方案4】：

我意识到我忘记在主页中为子组件导入 PipesModule。导入后问题解决了

【讨论】：

你能帮我解决这个问题吗？您是如何为子组件导入 PipesModule 的？我没有名为 PipesModule 的文件。
@aleksejjj 我创建了一个名为管道的文件。并创建了一个名为 pipe.module.ts 的自定义 .ts 文件。我要更新我的帖子以显示管道.module.ts 文件的内容。

【解决方案5】：

只需在需要使用它的每个模块上导入管道，就可以节省大量阅读和实验。例如，如果您有一个名为 home 的页面，并且您想在此处使用管道，请转到 home.module.ts 并在那里导入它，在声明和导出中添加管道，您就完成了！

现在，如果您有多个管道创建一个模块，您甚至可以将其命名为 allmypipes.module.ts。将所有相关管道导入此模块并将它们添加到声明和导出中，然后将此模块导入您要使用任何管道的每个页面（page.module.ts），您就完成了！

【讨论】：