离子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中的自定义组件

回答

相关问题