Question

我有2页要使用自定义管道。我已经在src / app中创建了一个名为pipe的文件夹。并创建了一个文件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 {}

Answer 1

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

2）其次，在cmd“ ionic generate pipe pipe / 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。我们将只导入PipesModule而不导入所有管道。

4）您不必在app.module.ts中导入PipesModule

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

Answer 2

Ionic 4解决方案：

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

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

注意： ：尽管出于组织上的考虑，我建议将其放置在pipes目录中，但是您可以在项目目录中的任意位置创建管道。

在我要使用此管道的页面模块中，我导入了管道，并在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",

Answer 3

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

Answer 4

我在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>

希望它对您有帮助：）

Answer 5

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

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

离子4-找不到管道

5 个答案: