离子v3中的自定义组件 [英] Custom component in ionic v3
问题描述
我想创建一个简单的组件并将其包含在页面中.我用ionic g component my-header
(ionic-cli v3 beta版)创建了它,修复了IonicPageModule错误,然后将其添加到另一个页面.然后我得到这个错误:
I wanted to create a simple component and include it on a page. I created it with ionic g component my-header
(ionic-cli v3 beta), fixed the IonicPageModule bug and then added to another page. I then get this error:
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声明中.
The "MyHeaderComponent" was added to the @NgModule declarations automatically.
感谢您的帮助.
该组件位于我的components
文件夹内:
The component is located inside my components
folder:
components/my-header/my-header.html
components/my-header/my-header.html
<div>
{{text}}
</div>
components/my-header/my-header.module.ts
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
components/my-header/my-header.scss
my-header {}
components/my-header/my-header.ts
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
app/app.module.ts
/* imports */
import { MyHeaderComponent } from '../components/my-header/my-header';
@NgModule({
declarations: [
MyApp,
MyHeaderComponent
],
...
pages/home/home.html
pages/home/home.html
推荐答案
您不必在ngModule中导入MyHeaderComponent
.
You dont have to import MyHeaderComponent
in ngModule.
您应该将MyHeaderComponentModule
导入到要使用此页面的模块中.
You should import MyHeaderComponentModule
in your page module where you want to use this.
imports: [
MyHeaderComponentModule,
],
这篇关于离子v3中的自定义组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!