web-dev-qa-db-fra.com

Ionic 4 composants personnalisés

Comment charger un composant dans ionic 4 après avoir exécuté la commande ionic g component myComponent? Je souhaite ajouter un nouveau composant personnalisé généré à ma page d'accueil.

angulartypescriptionic-frameworkionic4
29
Yushin

Enfin, voici un repro qui fonctionne:

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

Ceci ajoute à la fois une déclaration et une exportation au module de composants pour "myComponent".

Pour utiliser le composant, ajoutez simplement 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é à app.module.ts et c'est ainsi.

Notez également que si vous souhaitez utiliser TOUS les composants dans vos propres composants personnalisés, vous devez ajouter IonicModule à la propriété imports dans components.module.ts.

J'espère que cela t'aides :-)

31
Steffen

Ceci est votre sélecteur dans composants> foot-card> foot-card.ts:

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

@Component({
  selector: 'foot-card',
  templateUrl: 'foot-card.html'
})
export class FootCardComponent {

  text: string;

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

}

Voici vos composants.module.ts:

import { NgModule } from '@angular/core';
import { FootCardComponent } from './foot-card/foot-card';
import { IonicModule } from 'ionic-angular';

@NgModule({
    declarations: [FootCardComponent],
    imports: [IonicModule],
    exports: [FootCardComponent]
})

export class ComponentsModule {}

Ceci est votre app.module.ts:

import { FootCardComponent } from '../components/foot-card/foot-card';
import { ComponentsModule } from '../components/components.module'

@NgModule({
  declarations: [

  ],
  imports: [
    ComponentsModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    FootCardComponent
  ],
  providers: [
  ]
})
export class AppModule {}

Vous devez importer un composant-module lors de l'importation et déclarer le nom du composant dans les composants d'entrées dans app.module.ts.

Dans components.module.ts, vous devez déclarer et exporter le composant, mais n'oubliez pas d'importer IonicModule.

Je faisais face au même problème, mais personne ne m'a demandé d'importer IonicModule Dans Components.module.ts et app.module.ts, il suffit d'ajouter à entryComponent et d'import ComponentModule.

11
user8531037

Fondamentalement, ionic g component myComponent mettra à jour app.module.ts et créera le composant dans le dossier de l'application.

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

ionic g module components

va générer un dossier de module appelé components. Générez ensuite 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

Inside components.module.ts pourrait être écrit 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 {}

puis assurez-vous d'importer le module de composants à l'intérieur du 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 recréer une page ou un composant.

ionic g page testing

Importer le module de composants dans votre composant/page de test ou (dans votre page d’accueil actuelle):

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

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

Enfin, écrivez simplement le composant dans la page de test en utilisant le sélecteur de composant. 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>

J'espère que cela pourrait aider.

8
Snow Bases

Après avoir fait tout ce qui précède ...

seulement travaillé dans home.page.html en ajoutant app avant le nom de mon composant comme:

<app-my-component></app-my-component>
3
Inês Gomes

La clé est d'inclure un nouveau module, spécifiquement pour votre composant personnalisé.

Je ne comprends tout simplement pas pourquoi la commande "ionique générer des composants composants/myComponent --export" ne crée plus ce module obsolète. Je suis passé par le même problème ici .

1
Silvair L. Soares