Cómo crear un componente reutilizable con Ionic 3 y Angular 4

Después de de esta extensa recopilación de datos resolvimos este atolladero que tienen ciertos de nuestros usuarios. Te ofrecemos la solución y nuestro objetivo es que te resulte de mucha apoyo.

Solución:

Tienes que quitarlo de app.module.ts ya que ha sido declarado en el ComponentsModule.

aplicación.módulo.ts

@NgModule({
  declarations: [
    MyApp,
    TabsPage,
    //AppHeaderComponent <-- need to remove this
  ],

Después de eso, necesitas import la ComponentsModule como se muestra a continuación en la página module donde lo necesites.

mi.módulo.ts

@NgModule(
  declarations: [
    MyPage,
  ],
  imports: [
    IonicPageModule.forChild(MyPage),
    ComponentsModule <-- here you need
  ],
)
export class MyPageModule  

Así es como ComponentsModule debería verse de otra manera, no podrá usar envoltorios iónicos como ion-grid, ion-row etc.

componentes.módulo.ts

import NgModule from '@angular/core';
import CreatePostComponent from './create-post/create-post';
import IonicModule from "ionic-angular";

@NgModule(
    declarations: [
    CreatePostComponent,
  ],
    imports: [
    IonicModule, <== make sure to import IonicModule
  ],
    exports: [
    CreatePostComponent,
  ]
)
export class ComponentsModule 

y luego, después de esto, querrías poner ComponentsModule dentro de las importaciones array de cualquier otro componente module.ts archivo en el que desea utilizarlo. Aquí, por ejemplo, quiero usar CreatePostComponent dentro de mi página de suministro de noticias (página iónica).

suministro de noticias.module.ts

@NgModule(
  declarations: [
    NewsfeedPage,
  ],
  imports: [
    IonicPageModule.forChild(NewsfeedPage),
    ComponentsModule
  ],
)

y listo, puedes usar tu CreatePostComponent selector (create-post en mi caso) dentro newsfeed.html.

Si entiendes que ha resultado provechoso este artículo, te agradeceríamos que lo compartas con otros programadores y nos ayudes a extender esta información.

---

---

Utiliza Nuestro Buscador