Benutzerdefinierte Komponente in ionic v3

Question

Ich wollte eine einfache Komponente erstellen und es auf einer Seite enthalten. Ich habe es mit ionic g component my-header (ionic-cli v3 beta) erstellt, den IonicPageModule-Bug behoben und dann zu einer anderen Seite hinzugefügt. Ich bekomme dann diesen Fehler:

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. 

Die „MyHeaderComponent“ wurde automatisch auf die @NgModule Erklärungen hinzugefügt.

Danke für Ihre Hilfe.

EDIT:

Die Komponente in meinem components Ordner befindet:

Komponenten/my-Header/my-header.html

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

Komponenten/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 {} 

komponenten/meine-header/meine-header.scss

my-header {} 

Komponenten/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 
    ], 
... 

Seiten/home/home.html

Answer 1

Sie müssen nicht in ngModule importieren.

Sie sollten MyHeaderComponentModule in Ihrem Seitenmodul importieren, wo Sie dies verwenden möchten.

imports: [ 
    MyHeaderComponentModule, 
    ], 

Answer 2

Sie müssen die Komponente in das Modul importieren. Stellen Sie sicher, dass Sie diese Komponente auch exportieren.

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

}) 

Answer 3

Da ionische 3 unterstützt faul-Laden, Sie nicht Ihre eigene Komponente in der App importieren müssen. module.ts-Datei. Stattdessen können Sie es in die Datei module.ts der bestimmten Seite importieren. Für zB: Wenn Sie Ihre eigene Komponente in Ihre Homepage verwenden möchten, können Sie importieren es nur in Ihrem home.module.ts Datei wie unten angegeben:

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 { 
 
    
 
}

jedoch nicht vergessen Entfernen Sie den Import und die Deklarationen aus der Datei app.module.ts, die beim Erstellen Ihrer benutzerdefinierten Komponente automatisch hinzugefügt wird.

Answer 4

Hier ist mein Modul. Hoffe, es wird Ihnen helfen, Ihre Frage zu beantworten:

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

Answer 5

Nur um zu klären: Ich habe die eine benutzerdefinierte navigatorComponent bin mit in vielen Seiten (wiederverwendbare Komponente).

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 {} 

Hinweis: Die navigatorComponent hat 4 Dateien: die ts, CSS, HTML und yourcomponentname.module.ts. Der Befehl "ionic g component" erzeugt nicht die letzte Datei (yourcomponentname.module.ts). Also habe ich es getan.