ionic v3のカスタムコンポーネント

私は単純なコンポーネントを作成し、それをページに含めることを考えました。私はそれを使ってionic g component my-header（ionic-cli v3 beta）、IonicPageModuleバグを修正して、別のページに追加しました。私はこのエラーが表示されます：

Error: Uncaught (in promise): Error: Template parse errors:
'my-header' is not a known element:
1. If 'my-header' is an Angular component, then verify that it is part of this module.
2. If 'my-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

"MyHeaderComponent"が自動的に@NgModule宣言に追加されました。

ご協力いただきありがとうございます。

編集：

コンポーネントは私の中にありますcomponentsフォルダ：

components / my-header / my-header.html

<div>
  {{text}}
</div>

components / my-header / my-header.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { MyHeaderComponent } from './my-header';

@NgModule({
  declarations: [
    MyHeaderComponent,
   ],
  imports: [
    IonicModule,
  ],
  exports: [
    MyHeaderComponent
  ],
  entryComponents:[
    MyHeaderComponent
  ]
})
export class MyHeaderComponentModule {}

components / my-header / my-header.scss

my-header {}

components / my-header / my-header.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-header',
  templateUrl: 'my-header.html'
})
export class MyHeaderComponent {

  text: string;

  constructor() {
    console.log('Hello MyHeaderComponent Component');
     this.text = 'Hello World';
  }

}

app / app.module.ts

/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';

@NgModule({
  declarations: [
    MyApp,
    MyHeaderComponent
  ],
...

ページ/ home / home.html

Andreas Gassmann

출처 angular ionic2 ionic3

あなたのコンポーネント用に個別のmodule.tsファイルがありますか？ - Suraj Rao
はい、コンポーネントに関連するコード全体を追加しました - Andreas Gassmann
これは答えか、新しい質問に値するとは思わないでください。しかし、怠惰なページにこのエラーがあるため、ここに来ました。受け入れられた答えのインポートと一緒にComponentsModuleページモジュールに、私はコンポーネントを追加しなければならなかったentryComponents（質問に示されている）コンポーネントモジュールの - Jason Goemaat

6 답변

あなたはインポートする必要はありませんMyHeaderComponentngModuleで

インポートする必要がありますMyHeaderComponentModuleこれを使用するページモジュールで

 imports: [
    MyHeaderComponentModule,
  ],

ありがとうございました。私はページモジュールにインポートすることを考えていませんでしたhome.module.ts直接。何らかの理由で私が私の中でそれをインポートするとうまくいかないapp.module.ts。私はそれが "味方に"利用可能になると思ったので、これを前に試しました。 - Andreas Gassmann
Ionic 3がインポートするのではなく、ページモジュールの宣言に入れる。 - Zeeshan Anjum
@ ZeeshanAnjumモジュールがインポートに入ります。ページ/コンポーネントが宣言に入る - Suraj Rao

ionic 3は遅延ロードをサポートしているので、カスタムコンポーネントをアプリケーションにインポートする必要はありません。 module.tsファイル。代わりに、特定のページのmodule.tsファイルにインポートできます。たとえば：あなたのホームページでカスタムコンポーネントを使用したい場合は、以下のようにhome.module.tsファイルにインポートすることができます：

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MyHeaderComponent }from '../../components/myheader/myheader';

@NgModule({
  declarations: [
    HomePage,
    MyHeaderComponent
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
   
  ],
  exports: [
    HomePage,
  ]
})
export class HomePageModule {
 
}

ただし、カスタムコンポーネントの作成時に自動的に追加されるapp.module.tsファイルからインポートと宣言を削除することを忘れないでください。

うまくいってくれてありがとう、男！ - Zaza
私はあなたが移動しなければならないと私の意見MyHeaderComponentからdeclarationsにimportsそれ以外の場合は動作しません - Georg Kastenhofer
@Sid Putturあなたは助けることができますか？2つ以上のページでコンポーネント（UserCardComponent）を使用したいと思います。私はHomePageモジュールでコンポーネントを宣言し、うまく使用できましたが、別のモジュールで宣言しようとしたときにエラーが発生しました。 "タイプUserCardComponentは、2つのモジュールの宣言の一部です：HomePageModuleとContactsPageModule！ UserCardComponentをHomePageModuleとContactsPageModuleをインポートする上位モジュールに移動することを検討してください。 UserCardComponentをエクスポートして含む新しいNgModuleを作成し、そのNgModuleをHomePageModuleとContactsPageModuleにインポートすることもできます。 - Sarah

ちょうど明確にするために：私は多くのページ（再利用可能なコンポーネント）でカスタムnavigatorComponentを使用しています。

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { TranslateModule } from '@ngx-translate/core';
import { PipesModule } from '../../pipes/PipesModule';
import { NavigatorComponent } from '../../components/navigator/navigator';
import { ComponentsModule } from '../../components/components.module';
import { NavigatorComponentModule } from '../../components/navigator/navigator.module';

@NgModule({
  declarations: [
    TestPage,

  ],
  imports: [
    IonicPageModule.forChild(EntriesPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule

  ],
  exports: [
   TestPage,

  ],
  providers:[
    NavigatorComponent
  ]
})
export class TestPageModule {}

注意：navigatorComponentには、ts、css、html、yourcomponentname.module.tsの4つのファイルがあります。 "ionic g component"コマンドは最後のファイル（yourcomponentname.module.ts）を生成しません。だから私はそれをやった。

イオン成分gは、「成分mts.ts」を生成する。これはすべての成分をイオン性で含む1つのモジュールです。そのモジュールはNgModuleのインポートに含める必要があります。 - Aragorn

ここに私のモジュールです。あなたの質問に答えるのを助けてくれることを願っています：

@NgModule({
  declarations: [
    TestPage
  ],
  imports: [
    IonicPageModule.forChild(TestPage),
    TranslateModule.forChild(),
    PipesModule,
    NavigatorComponentModule
  ],
  exports: [
    EntriesPage,
  ],
  providers:[
    NavigatorComponent
  ]
})

後でスレッドの答えが、私は確信しているこの情報を使用することができるより多くの人々が別の観点で説明されています。

Ionicでは、カスタム角度成分は、ComponentsModule。第1の成分がionic generate component、成分と共にイオンは、ComponentsModule。それ以降のコンポーネントはすべて同じモジュールに追加されます。

ここにサンプルがありますComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

使用するにはComponentsModuleアプリ内では、他の角度モジュールと同様に、ComponentsModulesにインポートする必要がありますAppModule。イオン生成成分（v 4.12）はこの工程を追加しないので、これは手動で添加しなければならない。

AppModuleの抜粋：

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

-1

モジュール内のコンポーネントをインポートする必要があります。そのコンポーネントも必ずエクスポートしてください。

@NgModule({
    imports: [
        IonicModule,
    ],
    declarations:[
        MyHeaderComponent
    ],
    exports:[
        MyHeaderComponent
    ],
    entryComponents:[
        MyHeaderComponent
    ]

})

悲しいことに、まだ私のために働いていません。コードサンプルを含めるように質問を更新しました。 - Andreas Gassmann
私が書いたコードはapp.module.tsになければなりません - ACES
それでもうまくいきませんでした...私はsurajの答えを使って修正しましたが、助けてくれてありがとう！ - Andreas Gassmann

ionic v3のカスタムコンポーネント

6 답변

リンクされた質問

最近の質問