angular - componente personalizate Ionic 4

Cum încarci un component în Ionic 4 după ce rulezi comanda ionic g component myComponent? Vreau să adaug un component personalizat nou generat pe pagina mea principală.

Răspuns #1

În sfârșit am înțeles asta, iată un exemplu reproducibil care funcționează:

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

Acest lucru adaugă atât o declarație, cât și o exportare în modulul de componente pentru „myComponent”.

Pentru a utiliza componenta, adăugați pur și simplu ComponentsModule în imports în modulul paginii dvs., de exemplu.

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

În acest fel nu se adaugă nimic în app.module.ts, așa cum ar trebui.

De asemenea, rețineți că dacă doriți să utilizați ORICE componente în propriile componente personalizate, trebuie să adăugați IonicModule în imports în components.module.ts

Sper că asta ajută :-)

Răspunsul #2

Practic, ionic g component myComponent va actualiza fișierul app.module.ts și va crea componenta în interiorul folderului app.

Dar dacă vrei un mod mai elegant de a adăuga componentele. Iată pașii:

ionic g module components

va genera un folder de module numit components. Apoi va genera o serie de componente:

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

În interiorul fișierului components.module.ts s-ar putea scrie astfel:

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

@NgModule({
  declarations: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  exports: [
    MyComponentComponent,
    MyComponentComponent2,
    MyComponentComponent3,
    MyComponentComponent4
  ]
})
export class ComponentsModule {}

și apoi asigură-te că imporți modulul componentelor în interiorul app.module.ts:

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

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

Pentru a testa componentele, trebuie să creezi din nou o pagină sau o componentă.

ionic g page testing

Importați modulul de componente în componenta/pagina dvs. de test sau (în pagina dvs. principală curentă în mod similar):

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

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

În cele din urmă, pur și simplu scrieți componenta în interiorul paginii de testare folosind selectorul de componente, de exemplu.

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

Sper că acest lucru te-ar putea ajuta.

Răspunsul #3

Acesta este selectorul tău în components>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';
  }

}

Acesta este fișierul tău 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 {}

Acesta este fișierul tău 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 {}

Trebuie să importați componenta-modul în import și să declarați componenta-nume în componentele de intrare din app.module.ts.

În components.module.ts, trebuie să declari și să exporți componenta, dar să nu uiți să imporți IonicModule.

Mă confruntam cu aceeași problemă, dar nimeni nu a spus să import IonicModule în Components.module.ts și în app.module.ts, doar să adaug la entryComponent și să import componentModule.