36 votes

Ionique 4 composants personnalisés

Comment faites-vous pour charger un composant ionique, de 4 après l'exécution de la commande ionic g component myComponent? Je veux ajouter un nouveau composant personnalisé ma page d'accueil.

43voto

Steffen Points 3667

Enfin compris cela, voici une repro qui fonctionne:

ionic start myProject blank --type=angular
ionic g module components
ionic g component components/myComponent --export

Cela ajoute à la fois un acte de déclaration et d'exportation pour les composants module "myComponent".

Pour utiliser le composant simplement ajouter ComponentsModule votre imports dans votre module de page, par exemple

@NgModule({
imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    ComponentsModule,
    RouterModule.forChild([
        {
            path: '',
            component: HomePage
        }
    ])
],
declarations: [HomePage]
})
export class HomePageModule { }

De cette façon, rien n'est ajouté à l' app.module.ts qui est la façon dont il devrait être.

Notez également que si vous souhaitez utiliser des composants dans votre propre composants personnalisés, vous avez besoin d'ajouter IonicModule de la imports en components.module.ts

Espérons que cela aide :-)

21voto

Nao Desu Points 163

Fondamentalement, ionic g component myComponent permettra de mettre à jour l'application.le module.ts et de créer le composant à l'intérieur du dossier app.

Mais si vous voulez un moyen plus élégant pour ajouter les composants. Voici les étapes:

ionic g module components

va générer un module appelé dossier components. Ensuite générer un tas de composants:

ionic g component components/myComponent --export
ionic g component components/myComponent2 --export
ionic g component components/myComponent3 --export
ionic g component components/myComponent4 --export

À l'intérieur des composants.le module.ts pourrait écrire comme ceci :

...
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';

import { MyComponentComponent } from './my-component/my-component.component';
import { MyComponentComponent2 } from './my-component2/my-component2.component';
import { MyComponentComponent3 } from './my-component3/my-component3.component';
import { MyComponentComponent4 } from './my-component4/my-component4.component';

const PAGES_COMPONENTS = [
  MyComponentComponent,
  MyComponentComponent2,
  MyComponentComponent3,
  MyComponentComponent4
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule.forRoot(),
  ],
  declarations: [
    PAGES_COMPONENTS
  ],
  exports: [
    PAGES_COMPONENTS
  ],
  entryComponents: [],
})
export class ComponentsModule {}

et alors assurez-vous d'importer les composants du module à l'intérieur de l' app.module.ts:

...
import { ComponentsModule } from './components/components.module';
...

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    ...
    ComponentsModule,
    ...
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Pour tester les composants, vous devez créer une page ou un composant de nouveau.

ionic g page testing

Importer des éléments du module dans votre composante de tests/page ou (dans votre page d'accueil actuelle de la même façon):

...
import { ComponentsModule } from '../components/components.module';
...

@NgModule({
  imports: [
     ...
     ComponentsModule,
     ...
  ],
  declarations: [TestingPage]
})
export class TestingPageModule {}

Enfin, il suffit d'écrire le composant à l'intérieur de la page de test en utilisant le composant sélecteur. par exemple

<app-my-component></app-my-component>
<app-my-component2></app-my-component>
<app-my-component3></app-my-component>
<app-my-component4></app-my-component>

Espérons que cela pourrait les aider.

6voto

Inês Gomes Points 345

Après avoir fait tous les ci-dessus ...

travaillé en home.page.html l'ajout d' application avant le nom de mon composant comme :

<app-my-component></app-my-component>

1voto

Silvair L. Soares Points 405

La clé est de comprendre un nouveau module, spécifiquement pour votre composant personnalisé.

Je ne comprends pas pourquoi la commande "ionique de générer des composants/myComponent --export" ne crée plus de cette désuet module. Je suis allé à travers ce même problème ici.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X