Ionic 4 componentes personalizados

Este post ha sido aprobado por expertos así garantizamos la exactitud de este enunciado.

Solución:

Finalmente resolví esto, aquí hay una reproducción que funciona:

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

Esto agrega tanto una declaración como una exportación al módulo de componentes para “myComponent”.

Para usar el componente simplemente agregue ComponentsModule para usted imports en el módulo de su página, p. ej.

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

De esta manera no se agrega nada a app.module.ts que es como debe ser.

También tenga en cuenta que si desea utilizar CUALQUIER componente en sus propios componentes personalizados, debe agregar IonicModule al imports en components.module.ts

Espero que esto ayude 🙂

Básicamente, ionic g component myComponent actualizará app.module.ts y creará el componente dentro de la carpeta de la aplicación.

Pero si desea una forma más elegante de agregar los componentes. Estos son los pasos:

ionic g module components

generará una carpeta de módulo llamada components. Luego genere un montón de componentes:

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

Dentro de components.module.ts se podría escribir así:

...
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 

y luego asegúrese de importar el módulo de componentes dentro del app.module.ts:

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

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

Para probar los componentes, debe crear una página o un componente nuevamente.

ionic g page testing

Importe el módulo de componentes en su componente / página de prueba o (en su página de inicio actual de manera similar):

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

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

Finalmente, simplemente escriba el componente dentro de la página de prueba usando el selector de componentes. p.ej

Espero que esto pueda ayudar.

Este es su selector en componentes> 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';
  

Este es su components.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 

Esta es tu 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 

Debe importar el módulo de componente en la importación y declarar el nombre del componente en los componentes de entrada en app.module.ts.

En components.module.ts, debe declarar y exportar el componente, pero no olvide importar IonicModule.

Estaba enfrentando el mismo problema, pero nadie me dijo que importara IonicModule en Components.module.ts y en app.module.ts, solo agregue a entryComponent e importe componentModule.

---

---

Utiliza Nuestro Buscador