web-dev-qa-db-fra.com

Ionic 4 - Le tube est introuvable

J'ai 2 pages pour utiliser un tuyau personnalisé. J'ai créé un dossier dans src/app nommé pipes. Et créé un fichier pipes.module.ts

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

et je l'importe à partir de mon premier fichier de module de composant devices.module.ts

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

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

ce composant fonctionne bien lorsque j'utilise un tuyau.

mais j'ai aussi un autre composant. 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 {}

im appeler la page d'accueil à partir de la page des appareils avec un bouton. Mais je reçois une erreur lorsque je clique sur le bouton.

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) Tout d'abord, créez le dossier pipes dans le dossier src/app (dans le dossier app).

2) Deuxièmement, sur cmd "ionic generate pipe pipes/searchfilter" => cela générera deux fichiers dans les pipes.

3 Troisièmement, créez un fichier dans le dossier des tuyaux avec le nom "pipes.module.ts" et écrivez le code ci-dessous pour => "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 { }

Maintenant que nous avons PipesModule, nous pouvons générer plus de tuyaux et les écrire dans pipesmodule. Nous importerons uniquement PipesModule au lieu de tous les tuyaux.

4) Vous n'avez pas besoin d'importer PipesModule dans app.module.ts

5) Maintenant, allez à la page que vous souhaitez utiliser pipe et ouvrez par exemple "anasayfa.module.ts" et importez "PipesModule" et écrivez-le dans @ngModel imports (il sera créé automatiquement) Veuillez faire attention que vous importerez PipesModule dans quelque chose.MODULE.TS pas quelque chose.page.ts

2
abdullah

Solution Ionic 4:

C'est ainsi que j'ai fait fonctionner des tuyaux personnalisés dans Ionic 4:

  1. Création d'un canal personnalisé dans le dossier pipes du répertoire app à l'aide de: ionic g pipe plural-singular

REMARQUE: Vous pouvez créer le tuyau où bon vous semble dans le répertoire de votre projet, bien que je recommande de le placer dans pipes répertoire pour des raisons d'organisation.

  1. Dans le module de la page où je voulais utiliser ce tube, j'ai importé le tube et l'ai spécifié sous providers et declarations, comme ceci:

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. Importé le tuyau dans le fichier TS de la page où je voulais utiliser le tuyau, comme ceci:

all.page.ts

import {PluralSingularPipe} from '../../pipes/plural-singular.pipe';
  1. Déclaré le tube dans le constructor de la même page, comme ceci:

all.page.ts

constructor(public pluralSingular: PluralSingularPipe) {}

  1. Je l'ai utilisé dans mon fichier HTML, comme ceci:

all.page.html

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

C'est tout!

POUR LES CURIEUX: Si ça aide, voici mes versions de package.json fichier:

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

J'ai réalisé que j'avais oublié d'importer PipesModule pour les composants enfants dans la page d'accueil. Problème résolu après l'importation

1
Cem Kocagöz

économisez beaucoup de lectures et d'expériences en important simplement le tuyau sur chaque module dans lequel vous devez l'utiliser. Par exemple, si vous avez une page appelée home et que vous souhaitez utiliser le tuyau ici, accédez à home.module.ts et importez là-bas, ajoutez le tuyau dans les déclarations et dans les exportations et vous avez terminé!

Maintenant, si plusieurs canaux créent un module, vous pouvez même l'appeler allmypipes.module.ts. importer tous les tuyaux pertinents dans ce module et les ajouter aux déclarations et exportations, puis importer ce module dans chaque page (page.module.ts) que vous souhaitez utiliser l'un des tuyaux et vous avez terminé!

0
Mbithy Mbithy