4个自定义组件

终于弄明白了,这是一个有用的复制程序:

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

希望这有帮助:-)

基本上, ionic g component myComponent 将更新app.module.ts并在app文件夹中创建组件。

但是如果你想要一个更优雅的方式来添加组件。步骤如下:

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

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

const PAGES_COMPONENTS = [
  MyComponentComponent,
  MyComponentComponent2,
  MyComponentComponent3,
  MyComponentComponent4
];

@NgModule({
  declarations: [
    PAGES_COMPONENTS
  ],
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
  ],
  exports: [
    PAGES_COMPONENTS
  ]
})
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

将组件模块导入测试组件/页面或(类似地导入当前主页):

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

希望这能有所帮助。

这是组件中的选择器>脚卡>脚卡.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 {}

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

您必须在import中导入组件模块,并在app.module.ts的entry components中声明组件名称。

我也面临同样的问题,但是没有人告诉我在Components.module.ts和app.module.ts中导入IonicModule,只添加到entryComponent和import componentModule。

添加 应用程序 在我的组件名称之前,例如:

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

关键是要包括一个新的模块,特别是为您的自定义组件。

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

在离子6.11.0上测试此溶液。效果很好。 流来创建名为“FeaturedProduct”的可重用组件-

ionic g component components/FeaturedProduct

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

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

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

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

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

在src/components文件夹中

:

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

组件.module.ts :

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

应用模块ts :

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

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

要使用它:

例如在 主页.html :

<myComponent> </myComponent>

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

离子g组分/组分名称