目录结构（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) {
}
}
效果图：
