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

Question

シンプルなコンポーネントを作成し、それをページに含める必要がありました。 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宣言に追加されました。

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

EDIT：

成分が私のcomponentsフォルダ内に配置されている：

コンポーネント/私のヘッダ/ MY-header.html

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

コンポーネント/私のヘッダ/私のヘッダ.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 {} 

コンポーネント/ my-header/my-header.scss

my-header {} 

コンポーネント/私のヘッダ/私の-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'; 
    } 

} 

アプリ/

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

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

ページ/ホーム/ home.html

をapp.module.ts

Answer 1

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

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

imports: [ 
    MyHeaderComponentModule, 
    ], 

Answer 2

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

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

}) 

Answer 3

イオン3はレイジーローディングをサポートしているため、カスタムコンポーネントをアプリケーションにインポートする必要はありません。 module.tsファイル。代わりに、特定のページの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 { 
 
    
 
}

しかしに忘れてはいけない：例えばのために：あなたはあなたのホームページでカスタムコンポーネントを使用したい場合は下記のようにあなたは自分のhome.module.tsファイルでそれをインポートすることができますカスタムコンポーネントの作成時に自動的に追加されるapp.module.tsファイルからインポートと宣言を削除します。

Answer 4

ここは私のモジュールです。それはあなたがあなたの質問に答えるのに役立ちます願っています：

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

Answer 5

だけ明確にする：私は多くのページ（再利用可能なコンポーネント）でカスタム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 {} 

注：TS、CSS、HTMLとyourcomponentname.module.ts：navigatorComponentは4つのファイルを持っています。 "ionic g component"コマンドは最後のファイル（yourcomponentname.module.ts）を生成しません。だから私はそれをやった。