刚入坑ionic3，就碰到Template parse errors:'xxx' is not a known element这个错误。愣是捣鼓了半天，才解决自定义组件问题。下面上解决方案：
1 全局中引入自定义组件
1.1 创建一个组件
ionic g component ion-test
之后目录会生成这几个文件
1.2 新建对应组件的module.ts文件
ion-test.module.ts
import { NgModule } from '@angular/core';
import {IonTestComponent} from './ion-test';
import {IonicModule} from 'ionic-angular';
@NgModule({
declarations:[IonTestComponent],
imports:[IonicModule],
exports:[IonTestComponent]
})
export class IonTestModule{}
1.3 全局中导入该组件
在app.module.ts导入ion-test.module.ts
①在app.module.ts 头部插入
import { IonTestModule } from '../components/ion-test/ion-test.module'
②在imports:[]中插入IonTestModule
1.4 使用该组件
在about.html中使用组件
效果图:
2 某个页面中引入自定义组件(含懒加载)
2.1 创建一个组件(与1.1相同)
2.2 新建对应组件的module.ts文件(与1.2相同)
2.3 新建about.module.ts(因为本次在about页面上使用自定义组件)
about.module.ts
import { NgModule } from '@angular/core';
import { IonTestModule } from '../../components/ion-test/ion-test.module';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about'
@NgModule({
declarations:[AboutPage]
,imports:[
IonicPageModule.forChild(AboutPage),
IonTestModule
]
,exports:[AboutPage]
})
export class AboutModule{}
2.4 在about.ts添加@IonicPage
about.ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { IonicPage } from 'ionic-angular/navigation/ionic-page';
@IonicPage({name:'about-page'})
@Component({
selector:'page-about',
templateUrl:'about.html'
})
export class AboutPage{
constructor(publicnavCtrl:NavController) {
}
}
2.5 在about.html使用该组件(与1.4相同)
2.6 在app.module.ts中删除AboutPage声明
2.7 修改tabs.ts
去掉AboutPage的导入，用字符串'about-page'来代替原来变量
import { Component } from '@angular/core';
import { ContactPage } from '../contact/contact';
import { HomePage } from '../home/home';
@Component({
templateUrl : 'tabs.html'
})
export class TabsPage{
tab1Root=HomePage;
tab2Root='about-page';
tab3Root=ContactPage;
constructor() {
}
}
2.8 完成，可看到如1.4中的效果图
3 关于components.module.ts
创建一个组件后，在components文件夹中会生成一个components.module.ts文件，如果在使用多个自定义组件到时候，可以将这些组件一起放到components.module.ts中，最后引入这个文件即可，就不用单独为每个组件写个xx.moudle.ts。
import { NgModule } from '@angular/core';
import { IonTestComponent } from './ion-test/ion-test';
……
……
import { IonicModule } from 'ionic-angular';
@NgModule({
declarations:[
IonTestComponent,
……
……
],
imports : [ IonicModule ],
exports:[
IonTestComponent
……
……
]
})
export class ComponentsModule{}
萌新入坑，一知半解，如有错误，欢迎指出！
