一.服務(wù):
將全局都會使用到的方法,類封裝成服務(wù).類似于iOS中的工具類,在需要用到的地方直接調(diào)用即可,步驟:
1.@Injectable() export class AppService{ }
2.在app.Module.ts 中providers中引入
providers: [ StatusBar, SplashScreen, AppService, QQSDK, ImagePicker, {provide: ErrorHandler, useClass: IonicErrorHandler} ]
二:組件
組件是一段通用的UI代碼。基本上是工程中多處會出現(xiàn)的代碼。封裝成組件的好處是:代碼整潔,美觀,快速開發(fā),快速定位到問題。
組件的創(chuàng)建ionic g component YourComponent,
在ts文件中加一個注入注解@input(),例如這樣@Input() products: Array<any>;.表示我們可以在外部給組件賦值。
我們使用命令行創(chuàng)建的時候,系統(tǒng)會幫我們創(chuàng)建ComponentsModule.ts,該文件會包含組件。如下所示:
import { NgModule } from '@angular/core'; import { IonProductsComponent } from './ion-products/ion-products'; import {IonicModule} from "ionic-angular"; import { XImgComponent } from './x-img/x-img'; @NgModule({ declarations: [IonProductsComponent, XImgComponent], imports: [IonicModule], exports: [IonProductsComponent, XImgComponent] }) export class ComponentsModule {}
我們應(yīng)該在app.Module.ts的imports節(jié)點引入這個文件. 有些通過ionic g page pageName創(chuàng)建出來的頁面沒有包括在app.Module.ts的entryComponents節(jié)點中。我們在這些頁面使用組件時應(yīng)該在頁面.Module.ts的imports節(jié)點中包含ComponentsModule
三.event的使用
event其實就是iOS中的通知??稍跊]聯(lián)系的頁面之間傳遞參數(shù),以及進行其他操作
1.發(fā)送通知 可以攜帶參數(shù) key``value的形式
events.publish("CarIsChange",{});
2.接收通知
this.events.subscribe("CarIsChange",()=>{ console.log("接收到通知!!"); copyThis.storage.get("shop").then((val)=>{ copyThis.shopArr = val; console.log(copyThis.shopArr); }); });
3.頁面銷毀時回收通知
ionViewWillUnload() { console.log('界面銷毀'); this.events.unsubscribe('CarIsChange'); ///移除監(jiān)聽 }
四.列表中的item如何添加和移除css類
var initSelected: any =
document.getElementsByClassName('menuItem');//獲取class數(shù)組
if (initSelected[0].classList.contains("active")) {
initSelected[0].classList.remove("active")
}
//移除上次選中菜單的樣式
if (this.selectedMenuTarget) {
this.selectedMenuTarget.classList.remove("active")
}
//修改本次選中菜單的樣式
event.currentTarget.classList.add("active");
//將本次選中的菜單記錄
this.selectedMenuTarget = event.currentTarget;
五.基礎(chǔ)指令的使用
<div *ngIf="isLogin"></div>" 如果這個值為true 。將<div>添加到頁面,反之移除。
<ion-list> <button ion-item *ngFor="let item of listArr;let i=index" (click)="listItemClick(i)">{{item}}</button> </ion-list> *ngFor 循環(huán)指令的使用.可以獲取它的索引...
這倆個指令用得會比較多吧...
然后就是值綁定
<ion-input type="tel" clearInput [(ngModel)]="codeParam.usertel"></ion-input> 值綁定雙向。
六.Storage的使用
我們在做項目的時候,大部分的數(shù)據(jù)都是存在服務(wù)器上的。存在客戶端的可能是用戶信息,登錄狀態(tài)。用戶習(xí)慣(例如通知開關(guān))。本來想用Stroage做個購物車的,但是做的不是很理想。同事說,有這功夫,不如多研究點其他技術(shù),想想也是。。
如上..就是根據(jù)教程敲代碼的一些學(xué)習(xí)筆記...
附上GitHub地址:https://github.com/IVnaBo/ionicGirDress/。