## ionic2/3 整体变化总结
*ionic2/3的navigation用法*
```
## A 页面跳转带参数
ionic2 父页面用法
引入 navController
import {NavController} from "ionic-angular"
static get parameters(){
return [[NavController]]
}
constroctor(){
this.nav = nav
}
onPageDidLoad(){
this.nav.push(ContentPage---(页面),{item:id}---(传递的参数))
}
ionic2 子页面接收
引入 NavParams
import {NavParams} from "ionic-angular"
static get parameters(){
return [[NavParams]]
}
constroctor(params){
this.item= params.data.item
}
---------------------------------------------------------------------------------------------------------------
ionic3 父页面用法
引入NavController
import {NavController} from "ionic-angular"
constroctor(public navCtrl:NavController){}
ionViewDidLoad(){
this.nav.push(ContentPage,{item:id})
}
ionic3 子页面接收参数
引入 NavParamsController
import {NavParamsController } from "ionic-angular"
constroctor(public navparamsCtrl:NavParamsController ){}
ionViewDidLoad(){
this.item = this.navparamsCtrl.get('item')
}
---------------------------------------------------------------------------------------------------------------------
## B modal 传递参数
ionic2 modal用法
引入modal
let modal = Modal.create(Page,{item:id})
this.nav.present(modal)
-----------------------------------------------------------------------------------------------------------------
ionic3 modal用法
引入ModalController
constroctor 声明
let modal = this.modalCtrl.create(Page,{item:id})
modal.present()
子页面接收同上面一致
子页面modal关闭 父页面刷新
modal.present()之前
modal.onDidDismiss(){
页面请求
}
-----------------------------------------------------------------------------------------------------------------
## C html 页面跳转 传值
ionic3 html中页面跳转传值
[navPush]="ChatPages" --------------跳转页面
[navParams]="userInfo"
js中
引入ChatPage
chatPages:any
this.chatPages = ChatPage
```
*ionic2/3 数据暂存用法*
```
ionic2 localstorage
localstorage.username= this.username 存储
localstorage.username=“” 移除
ionic3 storage
import {Storage} from "@ionic/storage"
constroctor(public storage:Storage){}
this.storage.get('Id').then(()=>{})
```
*ionic2/3 imagepicker*
```
import {ImagePicker} from "ionic-native"
ImagePicker.getPictures().then((result)=>{
for(var i=0;i<result.length;i++){
this.user.head = result[i]
}
})
```
ionic2/3 图标
```
ionic resources --icon 192*192
ionic resources --splash 2208*2208
cordova pluign add cordova-plugin-splashscreen 生成 config中的 A/I
```
*ionic3下拉刷新*
```
<ion-refresher (ionRefresh)="doRefresher($event)">
<ion-refresher-content
pullingIcon="arrow-down" 下拉之前的样式
pullingText="下拉刷新"
refreshingSpinner="circle" 下拉之后的样式
refreshingText="数据加载中" >
</ion-refresher-content>
</ion-refresher>
doRefresher(refresher){
refresher.complete() 加载完成
}
```
ionic 2的http请求
```
import {Http} from "angular2/http"
static get parameters(){
return [[Http]]
}
constroctor(http){
this.http = http
}
this.http.get('url').subscribe((data)=>{
},error=>{})
```
ionic 3 请求
```
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class HttpProvider {
path: string = 'https://randomuser.me/api/?results=25';
constructor(public http: Http) {
console.log('Hello HttpProvider Provider');
}
loadUsers(){
return this.http.get(this.path).map(res => res.json(), err => {
console.log(err);
})
}
}
```
