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中頁(yè)面(組件)之間正向傳值方式？
這里所說的正向傳值指的是如有兩個(gè)頁(yè)面，我們簡(jiǎn)稱 頁(yè)面A 和 頁(yè)面B,正向指的是A跳轉(zhuǎn)到B,比如一個(gè)商品跳轉(zhuǎn)這個(gè)商品的詳情頁(yè)面。
正向傳值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頁(yè)面內(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頁(yè)面要怎么獲取 呢,看招：
B頁(yè)面內(nèi)容:
ts代碼
export class APage {
public bPage:any;
constructor(public navCtrl: NavController, public navParams: NavParams){
// 獲取A頁(yè)面?zhèn)鬟f過來的id
let id = this.navParams.get('id');
}
}
獲取相對(duì)還是很容易!
2.Js跳轉(zhuǎn)
A頁(yè)面內(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頁(yè)面獲取同上，這邊js跳轉(zhuǎn)主要是用NavControlller中的push方法，第一個(gè)參數(shù)為要跳轉(zhuǎn)的頁(yè)面，第二個(gè)參數(shù)的就是參數(shù)值，注意這是一個(gè)Json格式的對(duì)象。
總結(jié)
今天主要分享界面的正向傳值,其實(shí)主要?dú)w功了NavController和NavParams這兩個(gè)強(qiáng)大 的模塊,這兩個(gè)還有很多方法 ，大家要進(jìn)一步學(xué)習(xí)，可以到官方文檔查看哦。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
-
angularjs $http實(shí)現(xiàn)form表單提交示例
這篇文章主要介紹了angularjs $http實(shí)現(xiàn)form表單提交示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-06-06
-
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個(gè)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。 2017-04-04
-
今天小編就為大家分享一篇angularJs利用$scope處理升降序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧 2018-10-10
-
這篇文章主要為大家介紹了Angular獲取ngIf渲染的Dom元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪 2023-05-05
-
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪 2023-04-04
-
這篇文章主要介紹了使用angular寫一個(gè)hello world的方法及示例,需要的朋友可以參考下 2015-01-01
-
AngularJS基礎(chǔ) ng-open 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-open 指令,這里幫大家整理了ng-open指令的基本資料,有需要的小伙伴可以參考下 2016-08-08
-
AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下 2016-11-11
-
學(xué)習(xí)AngularJs:Directive指令用法（完整版）
這篇文章主要學(xué)習(xí)AngularJs:Directive指令用法，內(nèi)容很全面，感興趣的小伙伴們可以參考一下 2016-04-04
-
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪 2023-10-10
最新評(píng)論
1.Ionic3.x中頁(yè)面(組件)之間正向傳值方式？
這里所說的正向傳值指的是如有兩個(gè)頁(yè)面，我們簡(jiǎn)稱 頁(yè)面A 和 頁(yè)面B,正向指的是A跳轉(zhuǎn)到B,比如一個(gè)商品跳轉(zhuǎn)這個(gè)商品的詳情頁(yè)面。
正向傳值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頁(yè)面內(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頁(yè)面要怎么獲取 呢,看招：
B頁(yè)面內(nèi)容:
ts代碼
export class APage {
public bPage:any;
constructor(public navCtrl: NavController, public navParams: NavParams){
// 獲取A頁(yè)面?zhèn)鬟f過來的id
let id = this.navParams.get('id');
}
}
獲取相對(duì)還是很容易!
2.Js跳轉(zhuǎn)
A頁(yè)面內(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頁(yè)面獲取同上，這邊js跳轉(zhuǎn)主要是用NavControlller中的push方法，第一個(gè)參數(shù)為要跳轉(zhuǎn)的頁(yè)面，第二個(gè)參數(shù)的就是參數(shù)值，注意這是一個(gè)Json格式的對(duì)象。
總結(jié)
今天主要分享界面的正向傳值,其實(shí)主要?dú)w功了NavController和NavParams這兩個(gè)強(qiáng)大 的模塊,這兩個(gè)還有很多方法 ，大家要進(jìn)一步學(xué)習(xí)，可以到官方文檔查看哦。
好了，以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
-
angularjs $http實(shí)現(xiàn)form表單提交示例
這篇文章主要介紹了angularjs $http實(shí)現(xiàn)form表單提交示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-06-06 -
Angular.Js之Scope作用域的學(xué)習(xí)教程
這篇文章主要給大家分享了關(guān)于Angular.Js之Scope作用域的學(xué)習(xí)教程 ,文中通過多個(gè)示例代碼介紹的非常詳細(xì)，相信對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧。2017-04-04 - 今天小編就為大家分享一篇angularJs利用$scope處理升降序的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
- 這篇文章主要為大家介紹了Angular獲取ngIf渲染的Dom元素示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
-
Angular中的ActivatedRoute和Router原理解釋
這篇文章主要為大家介紹了Angular中的ActivatedRoute和Router原理解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04 - 這篇文章主要介紹了使用angular寫一個(gè)hello world的方法及示例,需要的朋友可以參考下2015-01-01
-
AngularJS基礎(chǔ) ng-open 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-open 指令,這里幫大家整理了ng-open指令的基本資料,有需要的小伙伴可以參考下2016-08-08 -
AngularJS驗(yàn)證信息框架的封裝插件用法【w5cValidator擴(kuò)展插件】
這篇文章主要介紹了AngularJS驗(yàn)證信息框架的封裝插件用法,分析了AngularJS表單驗(yàn)證規(guī)則并實(shí)例說明了w5cValidator擴(kuò)展插件的相關(guān)使用技巧,需要的朋友可以參考下2016-11-11 -
學(xué)習(xí)AngularJs:Directive指令用法（完整版）
這篇文章主要學(xué)習(xí)AngularJs:Directive指令用法，內(nèi)容很全面，感興趣的小伙伴們可以參考一下2016-04-04 -
Angular中ng?update命令force參數(shù)含義詳解
這篇文章主要為大家介紹了Angular中ng?update命令force參數(shù)含義詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10