## ionic2/3 整體變化總結(jié)
*ionic2/3的navigation用法*
```
## A 頁面跳轉(zhuǎn)帶參數(shù)
ionic2 父頁面用法? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
引入 navController? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
import {NavController} from "ionic-angular"? ? ? ?
static get parameters(){? ? ? ? ? ? ? ? ? ? ? ? ? ?
? return [[NavController]]? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
constroctor(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
? this.nav = nav? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
}
onPageDidLoad(){
? ? this.nav.push(ContentPage---(頁面),{item:id}---(傳遞的參數(shù)))
}
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 子頁面接收參數(shù)? ?
引入? NavParamsController?
import {NavParamsController } from "ionic-angular"
? constroctor(public navparamsCtrl:NavParamsController ){}
? ionViewDidLoad(){
? ? this.item = this.navparamsCtrl.get('item')?
? }
? ---------------------------------------------------------------------------------------------------------------------
## B modal 傳遞參數(shù)
? 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關(guān)閉? 父頁面刷新?
? modal.present()之前?
? modal.onDidDismiss(){
? ? ? 頁面請求
}
? -----------------------------------------------------------------------------------------------------------------? ?
## C html 頁面跳轉(zhuǎn) 傳值
ionic3 html中頁面跳轉(zhuǎn)傳值
[navPush]="ChatPages" --------------跳轉(zhuǎn)頁面
[navParams]="userInfo"?
js中? ?
引入ChatPage?
chatPages:any
this.chatPages = ChatPage
```
*ionic2/3 數(shù)據(jù)暫存用法*
```
? ? 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? 圖標(biāo)
```
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="數(shù)據(jù)加載中" >
? ? ? </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);
? ? })
? }
}
```
