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.

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

ご協力ありがとうございました。

EDIT

コンポーネントは、私の 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
  ],
...

ページ/ホーム/ホーム.html

Andreas Gassmann
編集された質問 20日 4月 2017 в 8:38
プログラミング
angular ionic2 ionic3
19日 4月 2017 в 11:38
まだビューはありません

ionic 3 はレイジーローディングをサポートしているので、カスタムコンポーネントを app.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 ファイルから、import と宣言を削除するのを忘れないでください。

解説 (2)
ソリューション

ngModuleでMyHeaderComponentをインポートする必要はありません。

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

 imports: [
    MyHeaderComponentModule,
  ],
Suraj Rao
編集した答え 20日 4月 2017 в 9:07
解説 (3)

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

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

})
解説 (3)