Angular+Ionic使用queryParams實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)傳值的方法
更新時(shí)間：2020年09月05日 10:45:58 作者：會(huì)做夢(mèng)的辣條魚
這篇文章主要介紹了Angular+Ionic使用queryParams實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)傳值的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
最近，在做電商項(xiàng)目，項(xiàng)目中需要實(shí)現(xiàn):點(diǎn)擊編輯按鈕,跳轉(zhuǎn)頁(yè)面完成添加地址，修改地址功能。
使用到angular傳參,簡(jiǎn)單做一總結(jié)：
1，發(fā)送界面ts
//編輯地址
EditorAddress(item) {
console.log("選中的地址");
console.log(item);
this.router.navigate(['/editor-address'], { queryParams: item })
}
2，接收界面ts
public personName:string=""
public phone:string=""
public areaInfo:string=""
public detailedAddress:string=""
public isDefault:number
ngOnInit() {
//編輯地址
this.activatedRoute.queryParams.subscribe((res) => {
this.personName =res.personName,
this.phone=res.phone,
this.areaInfo=res.areaInfo,
this.detailedAddress=res.detailedAddress,
this.isDefault=res.isDefault//1
//
})
}
3，效果
到此這篇關(guān)于Angular+Ionic使用queryParams實(shí)現(xiàn)跳轉(zhuǎn)頁(yè)傳值的文章就介紹到這了,更多相關(guān)Angular跳轉(zhuǎn)頁(yè)傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- Angular性能優(yōu)化之第三方組件和懶加載技術(shù)
- Angular框架詳解之視圖抽象定義
- AngularJS 中括號(hào)的作用詳解
- Angular短信模板校驗(yàn)代碼
- 關(guān)于angular引入ng-zorro的問題淺析
- Angular進(jìn)行簡(jiǎn)單單元測(cè)試的實(shí)現(xiàn)方法實(shí)例
- AngularJs的$http發(fā)送POST請(qǐng)求,php無法接收Post的數(shù)據(jù)問題及解決方案
- Angular+ionic實(shí)現(xiàn)折疊展開效果的示例代碼
- 淺談Angular的12個(gè)經(jīng)典問題
相關(guān)文章
AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議
AnglarJS作為一款優(yōu)秀的Web框架，可大大簡(jiǎn)化前端開發(fā)的負(fù)擔(dān)。本文給大家介紹AngularJS進(jìn)行性能調(diào)優(yōu)的7個(gè)建議，涉及到angularjs性能調(diào)優(yōu)相關(guān)知識(shí)，對(duì)本文感興趣的朋友一起學(xué)習(xí)吧2015-12-12
AngularJS學(xué)習(xí)筆記之TodoMVC的分析
這篇文章主要介紹了AngularJS學(xué)習(xí)筆記之TodoMVC的分析的相關(guān)資料,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了AngularJS中filter的使用實(shí)例詳解的相關(guān)資料,這里提供實(shí)例幫助大家理解掌握，希望能幫助到大家，需要的朋友可以參考下2017-08-08
Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)過濾并替換關(guān)鍵字小功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-09-09
本篇文章主要介紹了剖析Angular Component的源碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
angular.js實(shí)現(xiàn)購(gòu)物車功能
這篇文章主要為大家詳細(xì)介紹了angular.js購(gòu)物車功能的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
AngularJs bootstrap搭載前臺(tái)框架——準(zhǔn)備工作
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架，這里對(duì)Bootstrap 搭載環(huán)境，及注意事項(xiàng)做了講解，有需要的小伙伴可以參考下2016-09-09
淺談Angularjs link和compile的使用區(qū)別
下面小編就為大家?guī)硪黄獪\談Angularjs link和compile的使用區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
簡(jiǎn)介AngularJS中$http服務(wù)的用法
我們可以使用內(nèi)置的$http服務(wù)直接同外部進(jìn)行通信。$http服務(wù)只是簡(jiǎn)單的封裝了瀏覽器原生的XMLHttpRequest對(duì)象。接下來通過本文給大家簡(jiǎn)單介紹angularjs中http服務(wù)的用法，喜歡的朋友可以參考下2016-02-02