web-dev-qa-db-fra.com

Composant personnalisé dans ionic v3

Je voulais créer un composant simple et l'inclure sur une page. Je l'ai créé avec ionic g component my-header (ionic-cli v3 beta), corrigé le bogue IonicPageModule, puis ajouté à une autre page. J'ai alors cette erreur:

Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

Le "MyHeaderComponent" a été ajouté aux déclarations @NgModule automatiquement.

Merci de votre aide.

MODIFIER:

Le composant se trouve dans mon dossier components:

composants/mon-en-tête/mon-en-tête.html

<div>
  {{text}}
</div>

composants/mon-en-tête/mon-en-tête.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';

@NgModule({
  declarations: [
    MyHeaderComponent,
   ],
  imports: [
    IonicModule,
  ],
  exports: [
    MyHeaderComponent
  ],
  entryComponents:[
    MyHeaderComponent
  ]
})
export class MyHeaderComponentModule {}

composants/my-header/my-header.scss

my-header {}

composants/mon-en-tête/mon-en-tête.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-header',
  templateUrl: 'my-header.html'
})
export class MyHeaderComponent {

  text: string;

  constructor() {
    console.log('Hello MyHeaderComponent Component');
     this.text = 'Hello World';
  }

}

app/app.module.ts

/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';

@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

pages/home/home.html

angularionic2ionic3
19
Andreas Gassmann

Vous n'avez pas à importer MyHeaderComponent dans ngModule.

Vous devez importer MyHeaderComponentModule dans votre module de page où vous souhaitez utiliser ceci.

 imports: [
    MyHeaderComponentModule,
  ],
18
Suraj Rao

Étant donné qu'ionic 3 prend en charge le chargement paresseux, vous n'avez pas besoin d'importer votre composant personnalisé dans l'application. fichier module.ts. Au lieu de cela, vous pouvez l'importer dans le fichier module.ts d'une page spécifique. Par exemple: Si vous souhaitez utiliser votre composant personnalisé dans votre page d'accueil, vous pouvez simplement l'importer dans votre fichier home.module.ts comme indiqué ci-dessous:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MyHeaderComponent }from '../../components/myheader/myheader';

@NgModule({
  declarations: [
    HomePage,
    MyHeaderComponent
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
   
  ],
  exports: [
    HomePage,
  ]
})
export class HomePageModule {
 
}

Cependant, n'oubliez pas de supprimer votre importation et vos déclarations du fichier app.module.ts qui est ajouté automatiquement lorsque vous créez votre composant personnalisé.

28
Sid Puttur

Voici mon module. J'espère que cela vous aidera à répondre à votre question:

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})
0
suanter

Réponse tardive pour le fil, mais je suis sûr qu'il y a plus de gens qui peuvent utiliser cette information expliquée dans une autre perspective.

Dans Ionic, les composants angulaires personnalisés sont organisés dans un module distinct appelé ComponentsModule. Lorsque le premier composant est généré à l'aide de ionic generate component, avec le composant, ionic génère la variable ComponentsModule. Tous les composants suivants sont ajoutés au même module, à juste titre.

Voici un exemple ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

Pour utiliser le ComponentsModule dans l'application, comme tout autre module angulaire, le ComponentsModules doit être importé dans le AppModule. Le composant généré ionique (v 4.12) n’ajoute pas cette étape, elle doit donc être ajoutée manuellement.

Extrait de AppModule:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}
0
Aragorn

Juste pour clarifier: j'utilise un composant navigatorComponent personnalisé dans de nombreuses pages (composant réutilisable).

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';

@NgModule({
  declarations: [
    TestPage,

  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule

  ],
  exports: [
   TestPage,

  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

Remarque: le composant navigatorComponent contient 4 fichiers: ts, css, html et yourcomponentname.module.ts. La commande "composant ionique" ne génère pas le dernier fichier (votre nom de composant.module.ts). Alors je l'ai fait.

0
suanter