ionic3项目实战教程 - 第6讲 ionic3 component 组建封装

这一讲主要包含以下几个部分：

• 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

至于为什么要封装，封装有什么好处，下一讲用实例告诉大家。

完！

作者：IonicBlog
链接：https://www.jianshu.com/p/d5a1144d078c