一.服务:
将全局都会使用到的方法，类封装成服务.类似于iOS中的工具类,在需要用到的地方直接调用即可，步骤:
1.@Injectable() export class AppService{ }
2.在app.Module.ts 中providers中引入
providers: [ StatusBar, SplashScreen, AppService, QQSDK, ImagePicker, {provide: ErrorHandler, useClass: IonicErrorHandler} ]
二:组件
组件是一段通用的UI代码。基本上是工程中多处会出现的代码。封装成组件的好处是:代码整洁，美观，快速开发，快速定位到问题。
组件的创建ionic g component YourComponent,
在ts文件中加一个注入注解@input(),例如这样@Input() products: Array<any>;.表示我们可以在外部给组件赋值。
我们使用命令行创建的时候，系统会帮我们创建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 {}
我们应该在app.Module.ts的imports节点引入这个文件. 有些通过ionic g page pageName创建出来的页面没有包括在app.Module.ts的entryComponents节点中。我们在这些页面使用组件时应该在页面.Module.ts的imports节点中包含ComponentsModule
三.event的使用
event其实就是iOS中的通知。可在没联系的页面之间传递参数，以及进行其他操作
1.发送通知 可以携带参数 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'); ///移除监听 }
四.列表中的item如何添加和移除css类
var initSelected: any =
document.getElementsByClassName('menuItem');//获取class数组
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;
五.基础指令的使用
<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 循环指令的使用.可以获取它的索引...
这俩个指令用得会比较多吧...
然后就是值绑定
<ion-input type="tel" clearInput [(ngModel)]="codeParam.usertel"></ion-input> 值绑定双向。
六.Storage的使用
我们在做项目的时候，大部分的数据都是存在服务器上的。存在客户端的可能是用户信息，登录状态。用户习惯（例如通知开关）。本来想用Stroage做个购物车的，但是做的不是很理想。同事说，有这功夫，不如多研究点其他技术，想想也是。。
如上..就是根据教程敲代码的一些学习笔记...
附上GitHub地址:https://github.com/IVnaBo/ionicGirDress/。
网友评论