web-dev-qa-db-ja.com

Ionic 4-パイプが見つかりませんでした

カスタムパイプを使用する2ページがあります。 pipesという名前の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-frameworkionic4
6
Cem Kocagöz

1）最初に、src/appフォルダー（appフォルダー内）にpipesフォルダーを作成します。

2）次に、cmdで "ionic generate pipe pipes/searchfilter" =>これにより、パイプ内に2つのファイルが生成されます。

3 3番目に、 "pipes.module.ts"という名前のファイルをpipesフォルダーに作成し、以下のコードを=> "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 importsに書き込みます（これは自動的に作成されます）PipesModuleをインポートするように注意してくださいsomething.MODULE.TSではなくsomething.page.ts

2
abdullah

Ionic 4 Solution：

これは私がカスタムパイプを動作させる方法ですIonic 4：

  1. _ionic g pipe plural-singular_を使用して、pipesディレクトリのappフォルダーにカスタムパイプを作成しました

注：プロジェクトディレクトリのどこにでもパイプを作成できますが、pipes整理のためのディレクトリ。

  1. このパイプを使用したいページのモジュールで、パイプをインポートし、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
})
_
  1. 次のように、パイプを使用したいページのTSファイルにパイプをインポートしました。

all.page.ts

_import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
_
  1. 次のように、同じページのconstructorでパイプを宣言しました。

all.page.ts

constructor(public pluralSingular: PluralSingularPipe) {}

  1. 次のように、HTMLファイルで使用します。

all.page.html

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

それだけです！

CURIOUSの場合：役立つ場合は、ここにpackage.jsonファイルの私のバージョンを示します。

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

子コンポーネントのPipesModuleをホームページにインポートするのを忘れていることに気付きました。インポート後に問題が解決しました

1
Cem Kocagöz

使用する必要があるすべてのモジュールにパイプをインポートするだけで、多くの読み取りと実験を節約できます。たとえば、homeというページがあり、ここでパイプを使用する場合は、home.module.tsに移動してインポートしますそこで、宣言とエクスポートにパイプを追加すれば完了です！

これで、複数のパイプでモジュールを作成した場合、それをallmypipes.module.tsと呼ぶこともできます。関連するすべてのパイプをこのモジュールにインポートし、宣言とエクスポートに追加してから、このモジュールを任意のパイプを使用するすべてのページ（page.module.ts）にインポートすれば完了です。

0
Mbithy Mbithy