Ionic 4 нестандартные компоненты

Ответ 1

Наконец-то понял, вот репродукция, которая работает:

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

Это добавляет объявление и экспорт в модуль компонентов для "myComponent".

Чтобы использовать компонент, просто добавьте ComponentsModule к вашему imports в вашем модуле страницы, например

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

Таким образом, ничего не добавляется в app.module.ts как и должно быть.

Также обратите внимание, что если вы хотите использовать ЛЮБЫЕ компоненты в ваших собственных пользовательских компонентах, вам нужно добавить IonicModule к imports в components.module.ts

Надеюсь это поможет :-)

Ответ 2

Это ваш селектор в компонентах> 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';
  }

}

Это ваши компоненты .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 {}

Это ваш 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 {}

Вы должны импортировать компонент-модуль при импорте и объявить имя-компонента в компонентах ввода в app.module.ts.

В components.module.ts вы должны объявить и экспортировать компонент, но не забудьте импортировать IonicModule.

Я столкнулся с той же проблемой, но никто не сказал, чтобы импортировать IonicModule В Components.module.ts и В app.module.ts, только добавить в entryComponent и импортировать componentModule.

Ответ 3

После всего вышеперечисленного...

работал только в home.page.html добавление приложения перед именем моего компонента, например:

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

Ответ 4

Так же, как это было сделано с Ionic 3.

Добавьте это сначала такой компонент к модулю, в консоли используйте

ionic g module components

Если вы хотите создать компонент во вложенной папке.

ionic g component components/myComponent --export

скажите, решит ли это ваш вопрос. Повеселись.

Ответ 5

Ключ должен включать новый модуль, специально для вашего пользовательского компонента.

Я просто не понимаю, почему команда "ионная генерация компонентов компонентов /myComponent --export" больше не создает этот устаревший модуль. Я прошел через эту же проблему здесь.

Ответ 6

По сути, ionic g component myComponent обновит app.module.ts и создаст компонент внутри папки приложения.

Но если вы хотите более элегантный способ добавления компонентов. Вот шаги:

ionic g module components

создаст папку модуля под названием components. Затем сгенерируйте кучу компонентов:

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

Внутри component.module.ts можно написать так:

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

и затем убедитесь, что импортировали модуль компонентов внутри app.module.ts:

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

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

Чтобы протестировать компоненты, вам нужно снова создать страницу или компонент.

ionic g page testing

Импортируйте модуль компонентов в ваш тестовый компонент/страницу:

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

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

Наконец, просто напишите компонент на странице тестирования с помощью селектора компонентов. например

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

Надеюсь, это поможет.

Ответ 7

В вашей папке src/components

myComponent.html:

//Here your component HTML Code. For example:
<ion-list radio-group (ionSelect)="change($event, item.type);" 
  ... 
</ion-list>

components.module.ts:

import {myComponentComponent} from "./myComponent/myComponent";
@NGModule({
  declatations: [myComponentComponent],
  imports:[],
  exports: [myComponentComponent]
})
export class ComponentsModule{}

В вашей папке src/app

app.module.ts:

import { MyComponentComponent } from "../components/myComponent/myComponent";

@NGModule({
   declarations: [
      yourPages....,
     MyComponentComponent
   ]
)}

Чтобы использовать это:

Например, в HomePage.html:

<myComponent> </myComponent>