目录结构（src）

编写组件

* ion-products.html

<p>
{{products}}
</p>

* ion-products.ts

import { NavController } from 'ionic-angular';

import { Component, Input } from '@angular/core';

@Component({

selector: 'ion-products',

templateUrl: 'ion-products.html'

})

export class IonProductsComponent {

@Input() products: any;

constructor(public navCtrl: NavController) {

console.log('Hello IonProducts Component');

}}

* ion-products.module.ts

import { IonicModule } from 'ionic-angular';

import { NgModule } from '@angular/core';

import { IonicPageModule } from 'ionic-angular';

import { IonProductsComponent } from './ion-products';

@NgModule({

declarations: [

IonProductsComponent

],

imports: [

IonicPageModule

],

exports: [

IonProductsComponent

]

})

export class IonProductsModule { }

在app.module.ts中声明自定义的组件

* app.module.ts

import { IonProductsModule } from "../components/ion-products/ion-products.module";

imports: [

BrowserModule,

IonProductsModule,

IonicModule.forRoot(MyApp, {

tabsHideOnSubPages: true, // 进入子页面隐藏tabs

mode: "ios",

pageTransition: 'md-transition',

}),

],

})

export class AppModule {}

使用自定义组件

* home.html

<ion-products [products]="products"></ion-products>

* home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

products:any = 'test test test'

constructor(public navCtrl: NavController) {

}

}