Ionic 4定制组件

Question

如何在命令后加载离子4中的组件ionic g component myComponent？我想将自定义组件添加到我的主页.

Answer 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

希望这可以帮助 :-)

Answer 2

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

您必须在import中导入component-module，并在app.module.ts中的条目component中声明component-name。

在components.module.ts中，您必须声明并导出组件，但不要忘记导入IonicModule。

我遇到了同样的问题，但是没有人告诉我要在Components.module.ts和app.module.ts中导入IonicModule，仅将其添加到entryComponent并导入componentModule。

Answer 3

Basically, ionic g component myComponent will update the app.module.ts and create the component inside the app folder.

But if you want a more elegant way to add the components. Here is the steps:

ionic g module components

will generate a module folder called components. Then generate a bunch of 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 could be write like this :

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

and then make sure to import the components module inside the app.module.ts:

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

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

To test the components, you need to create a page or component again.

ionic g page testing

Import components module into your testing component/page or (into your current home page similarly):

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

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

Finally, just write the component inside the testing page by using the component selector. e.g.

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

Hope this might help.

Answer 4

做完以上所有...

仅适用于 home.page.html在我的组件名称之前添加应用程序，例如：

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