這一講主要包含以下幾個部分：

• 1.創建ionic component
• 2.使用ionic component

1.創建ionic3組建

1.1 組建的創建

執行 ionic g component ion-products ，等待30s左右，成功之后可以看到目錄會發生變化：

6-1.png

1.2 組建的數據交互

通過@Input()來實現數據交互，ion-products.ts完整代碼如下：

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: Array<any>;
  constructor(public navCtrl: NavController) {
    console.log('Hello IonProducts Component');
  }
  goDetails(item) {
    console.debug('go details...')
  }
} 

1.3 組建的html實現

將home.html中商品列表部分的代碼剪切到ion-products.html

ion-products.html

  <div class="product">
    <ion-row wrap>
      <ion-col tappable col-6 *ngFor="let p of products" (click)="goDetails(p)">
         ![]({{p.PictUrl}})
        <p>{{p.Title}}</p>
        <div class="list-price buy">
          <span class="price-new"><i>￥</i>{{p.ZkFinalPrice}}</span>
          <i class="del">￥<span>{{p.ReservePrice}}</span></i>
        </div>
      </ion-col>
    </ion-row>
  </div>

1.4 組建樣式的實現

將home.scss里關于商品樣式的代碼剪切到ion-products.scss

ion-products.scss

  ion-products {
  .product {
    ion-row {
      background-color: #efefef;
      font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
      padding-top: 3px;
      ion-col {
        position: relative;
        background-color: white;
        border: 2px solid #efefef;
        border-radius: 2px;
        padding: 0px;
        p {
          margin: 0px;
          padding: 0px;
          width: 100%;
          font-size: 12px;
          font-family: "黑體-簡";
          font-weight: 300;
          color: #808080;
          height: 26px;
          line-height: 26px;
          background: rgba(255, 255, 255, 0.8);
          overflow: hidden;
          text-indent: 5px;
        }
      }
    }
    .list-price {
      width: 98%;
      height: 26px;
      line-height: 18px;
      position: relative;
      bottom: 0;
      margin: 0 2%;
    }
    .price-new {
      font-size: 18px;
      color: #f8285c;
    }
    .list-price i {
      font-style: normal;
      font-size: 12px;
    }
    .del {
      color: rgba(171, 171, 171, 1);
      text-decoration: line-through;
      margin-left: 2px;
    }
    .good-btn {
      display: block;
      position: absolute;
      height: 16px;
      line-height: 12px;
      color: #f8285c;
      font-size: 13px;
      font-family: "黑體-簡";
      text-align: right;
      top: 5px;
      right: 2px;
    }
    .quan_img {
      position: absolute;
      width: 61px;
      height: 55px;
      z-index: 5;
      right: 0;
      top: 0;
      cursor: pointer;
      background: url(/assets/img/quan.png) no-repeat;
      background-size: contain;
      color: #fff;
    }
    .quan_img .num_money {
      font-family: Arial;
      font-size: 18px;
      height: 40px;
      left: 9px;
      position: absolute;
      text-align: center;
      top: 14px;
      width: 40px;
    }
  }
}

分別完成 ion-products.ts , ion-products.html , ion-products.scss，組建就創建完畢了。

接下來教大家如何使用組建。

2.ionic3?組建的使用

組建創建成功時候，可以看到默認有一個?components.module.ts，?說明此component建默認是支持懶加載的。

components.modules.ts

import { IonicModule } from 'ionic-angular';
import { NgModule } from '@angular/core';
import { IonProductsComponent } from './ion-products/ion-products';

@NgModule({
    declarations: [IonProductsComponent],
    imports: [
        IonicModule
    ],
    exports: [IonProductsComponent]
})
export class ComponentsModule { }

2.1 導入component

在home.module.ts中導入components.module.ts

home.module.ts

import { ComponentsModule } from './../../components/components.module';
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
@NgModule({
    declarations: [
        HomePage
    ],
    imports: [
        IonicPageModule.forChild(HomePage),ComponentsModule
    ],
})
export class HomePageModule { }

導入之后才可以在home.html中使用。

2.2 使用component

將home.html的商品列表部分換成ion-products來呈現

 <ion-item-divider class="t-header" color="light"> 年會禮服2017年新款 </ion-item-divider>
<ion-products [products]="products"></ion-products>

好了，試試看效果。

6-2.png

至于為什么要封裝，封裝有什么好處，下一講用實例告訴大家。

完！