Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦翟斀?/h1>
更新時(shí)間:2018年03月13日 09:24:17 作者:前端小智
這篇文章主要給大家介紹了關(guān)于Angular 4.x+Ionic3踩坑之Ionic 3.x界面?zhèn)髦档南嚓P(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
1.Ionic3.x中頁面(組件)之間正向傳值方式?
這里所說的正向傳值指的是如有兩個(gè)頁面,我們簡稱 頁面A 和 頁面B,正向指的是A跳轉(zhuǎn)到B,比如一個(gè)商品跳轉(zhuǎn)這個(gè)商品的詳情頁面。
正向傳值Ionic3.x主要有2種
- 標(biāo)簽上直接跳轉(zhuǎn)
- Js跳轉(zhuǎn)
1) 標(biāo)簽上直接跳轉(zhuǎn)
Ionic3.x對(duì)Angular2以上的的路由進(jìn)一步封裝,路由跳轉(zhuǎn)主要是由模塊 NavController 來完成的,傳遞參數(shù)主要是由模塊 NavParams 來完成的,用法如下
A頁面內(nèi)容:
htmll:代碼
<button [navPush]="bPage" [navParams]="{id:'001'}"></button>
ts:代碼
import { BPage } from '../BPage';
export class APage {
public bPage:any;
constructor(public navCtrl: NavController, public navParams: NavParams){
this.bPage = BPage;
}
}
注意:這邊 自己經(jīng)常遇到一個(gè)問題就是我們申明,變量bPage的,可以有的教程就直接賦值,如
public bPage = BPage;
我的問題是,我寫這種寫法點(diǎn)擊按鈕跳轉(zhuǎn)不了,所以我的解決的方法 是在構(gòu)造函數(shù)里面賦值,這樣就可以解決啦!
那B頁面要怎么獲取 呢,看招:
B頁面內(nèi)容:
ts代碼
export class APage {
public bPage:any;
constructor(public navCtrl: NavController, public navParams: NavParams){
// 獲取A頁面?zhèn)鬟f過來的id
let id = this.navParams.get('id');
}
}
獲取相對(duì)還是很容易!
2.Js跳轉(zhuǎn)
A頁面內(nèi)容:
htmll:代碼
<buttton (click)="goToBpage()"></button>
ts代碼
import { BPage } from '../BPage';
export class APage {
constructor(public navCtrl: NavController, public navParams: NavParams){
}
// 跳轉(zhuǎn)方法
goToBpage(){
this.navCtrl.push(BPage,{'id':'0001'})
}
}
B頁面獲取同上,這邊js跳轉(zhuǎn)主要是用NavControlller中的push方法,第一個(gè)參數(shù)為要跳轉(zhuǎn)的頁面,第二個(gè)參數(shù)的就是參數(shù)值,注意這是一個(gè)Json格式的對(duì)象。
總結(jié)
今天主要分享界面的正向傳值,其實(shí)主要?dú)w功了NavController和NavParams這兩個(gè)強(qiáng)大 的模塊,這兩個(gè)還有很多方法 ,大家要進(jìn)一步學(xué)習(xí),可以到官方文檔查看哦。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
-
關(guān)于Angularjs中跨域設(shè)置白名單問題
這篇文章主要介紹了Angularjs中關(guān)于跨域設(shè)置白名單問題,需要的朋友可以參考下 2018-04-04
-
AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下 2018-08-08
-
解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題
今天小編就為大家分享一篇解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧 2018-08-08
-
AngularJS實(shí)現(xiàn)Input格式化的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下 2016-11-11
-
angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章 2015-10-10
-
Angular6 Filter實(shí)現(xiàn)頁面搜索的示例代碼
這篇文章主要介紹了Angular6 Filter實(shí)現(xiàn)頁面搜索的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧 2018-12-12
最新評(píng)論
1.Ionic3.x中頁面(組件)之間正向傳值方式?
這里所說的正向傳值指的是如有兩個(gè)頁面,我們簡稱 頁面A 和 頁面B,正向指的是A跳轉(zhuǎn)到B,比如一個(gè)商品跳轉(zhuǎn)這個(gè)商品的詳情頁面。
正向傳值Ionic3.x主要有2種
- 標(biāo)簽上直接跳轉(zhuǎn)
- Js跳轉(zhuǎn)
1) 標(biāo)簽上直接跳轉(zhuǎn)
Ionic3.x對(duì)Angular2以上的的路由進(jìn)一步封裝,路由跳轉(zhuǎn)主要是由模塊 NavController 來完成的,傳遞參數(shù)主要是由模塊 NavParams 來完成的,用法如下
A頁面內(nèi)容:
htmll:代碼
<button [navPush]="bPage" [navParams]="{id:'001'}"></button>
ts:代碼
import { BPage } from '../BPage'; export class APage { public bPage:any; constructor(public navCtrl: NavController, public navParams: NavParams){ this.bPage = BPage; } }
注意:這邊 自己經(jīng)常遇到一個(gè)問題就是我們申明,變量bPage的,可以有的教程就直接賦值,如
public bPage = BPage;
我的問題是,我寫這種寫法點(diǎn)擊按鈕跳轉(zhuǎn)不了,所以我的解決的方法 是在構(gòu)造函數(shù)里面賦值,這樣就可以解決啦!
那B頁面要怎么獲取 呢,看招:
B頁面內(nèi)容:
ts代碼
export class APage { public bPage:any; constructor(public navCtrl: NavController, public navParams: NavParams){ // 獲取A頁面?zhèn)鬟f過來的id let id = this.navParams.get('id'); } }
獲取相對(duì)還是很容易!
2.Js跳轉(zhuǎn)
A頁面內(nèi)容:
htmll:代碼
<buttton (click)="goToBpage()"></button>
ts代碼
import { BPage } from '../BPage'; export class APage { constructor(public navCtrl: NavController, public navParams: NavParams){ } // 跳轉(zhuǎn)方法 goToBpage(){ this.navCtrl.push(BPage,{'id':'0001'}) } }
B頁面獲取同上,這邊js跳轉(zhuǎn)主要是用NavControlller中的push方法,第一個(gè)參數(shù)為要跳轉(zhuǎn)的頁面,第二個(gè)參數(shù)的就是參數(shù)值,注意這是一個(gè)Json格式的對(duì)象。
總結(jié)
今天主要分享界面的正向傳值,其實(shí)主要?dú)w功了NavController和NavParams這兩個(gè)強(qiáng)大 的模塊,這兩個(gè)還有很多方法 ,大家要進(jìn)一步學(xué)習(xí),可以到官方文檔查看哦。
好了,以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
關(guān)于Angularjs中跨域設(shè)置白名單問題
這篇文章主要介紹了Angularjs中關(guān)于跨域設(shè)置白名單問題,需要的朋友可以參考下2018-04-04AngularJS自定義表單驗(yàn)證功能實(shí)例詳解
這篇文章主要介紹了AngularJS自定義表單驗(yàn)證功能,結(jié)合完整實(shí)例形式詳細(xì)分析了AngularJS實(shí)現(xiàn)表單驗(yàn)證的相關(guān)指令、模型綁定、數(shù)據(jù)驗(yàn)證等操作技巧,需要的朋友可以參考下2018-08-08解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題
今天小編就為大家分享一篇解決Angular4項(xiàng)目部署到服務(wù)器上刷新404的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08AngularJS實(shí)現(xiàn)Input格式化的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)Input格式化的方法,結(jié)合實(shí)例形式分析了AngularJS實(shí)現(xiàn)Input格式化的操作步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容
這篇文章主要介紹了angularJS與bootstrap結(jié)合實(shí)現(xiàn)動(dòng)態(tài)加載彈出提示內(nèi)容,通過bootstrp彈出提示。感興趣的朋友可以參考下本篇文章2015-10-10Angular6 Filter實(shí)現(xiàn)頁面搜索的示例代碼
這篇文章主要介紹了Angular6 Filter實(shí)現(xiàn)頁面搜索的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12