ionic3自定义组件

目录结构（src）

编写组件

* ion-products.html

 

{{products}}

* 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

---

* 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) {

  }

}

---

效果图：