Как загрузить компонент в ionic 4 после запуска команды ionic g component myComponent
? Я хочу добавить новый сгенерированный пользовательский компонент на мою домашнюю страницу.
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>