イオン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〜にimportsにcomponents.module.ts

お役に立てれば ：-）

これは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 {}

インポート時にはコンポーネントモジュールをインポートし、add.module.ts内のエントリコンポーネントではcomponent-nameを宣言する必要があります。

components.module.tsでは、コンポーネントを宣言してエクスポートする必要がありますが、IonicModuleをインポートすることを忘れないでください。

私は同じ問題に直面していましたが、誰もIonicModuleをComponents.module.tsおよびapp.module.tsにインポートするよう指示しましたが、entrycomponentとimport componentmoduleにのみ追加しました。

あなたの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>

• それは働いていない - yushin
• 何がうまくいかないか説明する - Jonathan
• ＆＃39; mycomponent＆＃39;既知の要素ではありません。1.＆＃39; mycomponent＆＃39; Angularコンポーネントである場合、それがこのモジュールの一部であることを確認します。 2.任意の要素を許可するには、NO_ERRORS_SCHEMA＆＃39; ＆＃39; @ NgModule.schemas＆＃39;このコンポーネントの - yushin
• それは私が得るエラーthats - yushin
• 私は自分の答えを編集する。今それは動作するはずです。 - Jonathan