簡単なコンポーネントを作って、それをページに含めたいと思いました。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
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 と宣言を削除するのを忘れないでください。