這一講主要包含以下幾個部分：
- 1.創(chuàng)建ionic component
- 2.使用ionic component
1.創(chuàng)建ionic3組建
1.1 組建的創(chuàng)建
執(zhí)行 ionic g component ion-products ，等待30s左右衍慎，成功之后可以看到目錄會發(fā)生變化：
6-1.png
1.2 組建的數(shù)據(jù)交互
通過@Input()來實現(xiàn)數(shù)據(jù)交互率寡，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實現(xiàn)
將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>{{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 組建樣式的實現(xiàn)
將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祷愉，組建就創(chuàng)建完畢了螟碎。
接下來教大家如何使用組建侣夷。
2.ionic3?組建的使用
組建創(chuàng)建成功時候硝逢，可以看到默認有一個?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來呈現(xiàn)
<ion-item-divider class="t-header" color="light"> 年會禮服2017年新款 </ion-item-divider>
<ion-products [products]="products"></ion-products>
好了，試試看效果读虏。
6-2.png
至于為什么要封裝责静，封裝有什么好處，下一講用實例告訴大家盖桥。
完灾螃！
