離子v3中的自定義組件

我想創建一個簡單的組件並將其包含在頁面中。我使用ionic g component my-header（ionic-cli v3 beta）創建了它，修復了IonicPageModule錯誤，然後添加到另一個頁面。然後我得到這個錯誤：離子v3中的自定義組件

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文件夾內：

組件/我的報頭/我的-了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 {}

components/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'; 
    } 

}

應用程序/ app.module.ts

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

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

頁/家庭/ home.html的

來源

2017-04-19 Andreas Gassmann

你的組件有單獨的module.ts文件嗎？ –

是的，我添加了與組件相關的整個代碼 –

您不必在ngModule中導入MyHeaderComponent。

你應該在你想要使用它的頁面模塊中輸入MyHeaderComponentModule。

imports: [ 
    MyHeaderComponentModule, 
    ],

來源

2017-04-20 08:54:35

謝謝，我沒有考慮直接在頁面模塊'home.module.ts'中導入它。出於某種原因，如果我將它導入到我的'app.module.ts'中，它就不起作用。之前我曾嘗試過，因爲我認爲這會使它「gobally」可用。 Ionic 3的 –

不要放進口，而是放入頁面模塊的聲明中。 –

@ZeeshanAnjum模塊進口。頁/組件去聲明 –

-1

您必須在模塊中導入組件。確保您也導出該組件。

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

})

來源

2017-04-20 07:59:38 ACES

可悲的是，仍然不適合我。我更新了我的問題以包含代碼示例。 –

我寫的代碼應該在app.module.ts – ACES

那也行不通...我使用suraj的答案修復了它，但是感謝您的幫助！ –

由於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文件中刪除您的導入和聲明。

來源

2017-05-09 14:04:33

工作很好，謝謝，男人！ – Zaza

這是我的模塊。希望它會幫助你回答你的問題：

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

來源

2018-02-10 13:18:06 suanter

只是爲了澄清：我在很多頁面（可重用組件）使用自定義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有4個文件：TS，CSS，HTML和yourcomponentname.module.ts。「ionic g component」命令不會生成最後一個文件（yourcomponentname.module.ts）。所以我做到了。

來源

2018-02-10 13:28:17 suanter

離子v3中的自定義組件

回答

相關問題