Ionic 4 自定义组件

Question

如何在运行命令 ionic g component myComponent 之后加载 ionic 4 中的组件？我想将新生成的自定义组件添加到我的主页。

Answer 1

在您的 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>

Answer 2

终于弄明白了，这是一个有效的重现：

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 添加到 components.module.ts

中的 imports

希望这对您有所帮助:-)

Answer 3

这是您在 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';
  }

}

这是你的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 {}

这是你的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。

Answer 4

关键是要包含一个新模块，专门用于您的自定义组件。

我只是不明白为什么命令 "ionic generate component components/myComponent --export" 不再创建这个过时的模块。我经历了同样的事情 problem here。

Answer 5

完成以上所有操作后...

只在home.page.html工作过在我的组件名称前添加 app，例如：

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

Answer 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

里面components.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';

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

然后确保在 app.module.ts:

中导入组件模块

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

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

要测试组件，您需要重新创建页面或组件。

ionic g page testing

将组件模块导入您的测试 component/page 或（类似地导入您当前的主页）：

...
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-component2>
<app-my-component3></app-my-component3>
<app-my-component4></app-my-component4>

希望这可能有所帮助。

Answer 7

只需输入以下命令即可生成自定义组件

离子g分量components/Component-Name

将组件添加到 html

Answer 8

在 Ionic 6.11.0 上测试此解决方案。完美运行。创建名为 'FeaturedProduct' -

的可重用组件的流程

第 1 步：创建组件 ionic g component components/FeaturedProduct

第 2 步：为此组件创建一个模块。 ionic g module components/FeaturedProduct

步骤 3：将 FeaturedProductComponent 导入 featured-product.module.ts 文件

@NgModule({
  declarations: [FeaturedProductComponent],
  exports: [FeaturedProductComponent],
  imports: [
    CommonModule
  ]
})

第 4 步：在所需页面的 module.ts 文件中导入 FeaturedProductModule。

@NgModule({
  imports: [
    ...
    ...
    FeaturedProductModule
  ],
  declarations: [Tab2Page]
})

现在组件可以被这个标签使用了 <app-featured-product></app-featured-product>

Ionic 4 自定义组件

Ionic 4 custom components

typescript

ionic-framework

angular

ionic4

在您的 src/components 文件夹中

在您的 src/app 文件夹中

使用方法：