离子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声明中.

谢谢你的帮助.

编辑:

该组件位于我的components文件夹中:

组件/我的头/我-了header.html

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

组件/我的头/我-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 {}

组件/我的头/我-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做为

Answer 1

由于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文件中删除导入和声明,该文件在创建自定义组件时自动添加.

Answer 2

你不必MyHeaderComponent在ngModule中导入.

您应该MyHeaderComponentModule在页面模块中导入要使用它的位置.

 imports: [
    MyHeaderComponentModule,
  ],