ionic v3 中的自定义组件 [英] Custom component in ionic v3

问题描述

我想创建一个简单的组件并将其包含在页面中.我使用 ionic g component my-header (ionic-cli v3 beta) 创建了它，修复了 IonicPageModule 错误，然后添加到另一个页面.然后我得到这个错误:

错误:未捕获(承诺):错误:模板解析错误:'my-header' 不是已知元素:1. 如果 'my-header' 是一个 Angular 组件，那么验证它是这个模块的一部分.2. 如果 'my-header' 是一个 Web 组件，则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以禁止显示此消息.

MyHeaderComponent"被自动添加到@NgModule 声明中.

感谢您的帮助.

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

components/my-header/my-header.html

{{文本}}</div>

components/my-header/my-header.module.ts

import { NgModule } from '@angular/core';从离子角"导入 { IonicModule }；从'./my-header'导入{ MyHeaderComponent }；@NgModule({声明:[我的标头组件，],进口:[离子模块，],出口:[我的标题组件],入口组件:[我的标题组件]})导出类 MyHeaderComponentModule {}

components/my-header/my-header.scss

我的标题{}

components/my-header/my-header.ts

从'@angular/core'导入{组件}；@零件({选择器:'我的标题'，模板网址:'我的头文件.html'})导出类 MyHeaderComponent {文本:字符串；构造函数(){console.log('Hello MyHeaderComponent 组件');this.text = 'Hello World';}}

app/app.module.ts

/* 导入 */从'../components/my-header/my-header'导入{ MyHeaderComponent }；@NgModule({声明:[我的应用程序，我的标题组件],...

pages/home/home.html

解决方案

你不必在ngModule中导入MyHeaderComponent.

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

 进口:[我的头组件模块，],

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.

The "MyHeaderComponent" was added to the @NgModule declarations automatically.

Thanks for your help.

EDIT:

The component is located inside my components folder:

components/my-header/my-header.html

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

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

my-header {}

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

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

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

pages/home/home.html

解决方案

You dont have to import MyHeaderComponent in ngModule.

You should import MyHeaderComponentModule in your page module where you want to use this.

 imports: [
    MyHeaderComponentModule,
  ],

这篇关于ionic v3 中的自定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！