淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫(xiě)法
研究ng4的官網(wǎng)，終于找到了我想要的方法。我想要的結(jié)果是用‘&'拼接參數(shù)傳送，這樣閱讀上是最好的。
否則很多‘/'的拼接，容易混淆參數(shù)和組件名稱。
一般我們頁(yè)面跳轉(zhuǎn)傳遞參數(shù)都是這樣的格式：
http://angular.io/api?uid=1&username=moon
但是在SPA單頁(yè)應(yīng)用中卻是下面的結(jié)果居多【初級(jí)視頻都是這樣敷衍的】
那么怎么實(shí)現(xiàn)我說(shuō)的結(jié)果呢？
重點(diǎn)開(kāi)始了。
實(shí)現(xiàn)從product頁(yè)面跳轉(zhuǎn)到product-detail頁(yè)面。
step1：在app-routing.module.ts中配置路由。
const routes: Routes = [
{
path: 'product',
component: ProductComponent,
},
{
path: 'product-detail',
component: ProductDetailComponent,
}
];
step2：在product.ts中書(shū)寫(xiě)跳轉(zhuǎn)，并傳參數(shù)。
constructor(
private router: Router, //這里需要注入Router模塊
){}
jumpHandle(){
//這是在html中綁定的click跳轉(zhuǎn)事件
this.router.navigate(['product-detail'], {
queryParams: {
productId: '1',
title: 'moon'
}
});
}
step3：在product-detail.ts中獲取傳遞過(guò)來(lái)的參數(shù)productId、title
constructor(
private activatedRoute: ActivatedRoute, //這里需要注入ActivatedRoute模塊
) {
activatedRoute.queryParams.subscribe(queryParams => {
let productId = queryParams.productId;
let title = queryParams.title;
});
}
ok，就這樣完美的解決了。
以上這篇淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫(xiě)法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解?附帶驗(yàn)證碼驗(yàn)證功能
這篇文章主要介紹了antd?Vue實(shí)現(xiàn)Login登錄頁(yè)面布局案例詳解附帶驗(yàn)證碼驗(yàn)證功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
vue路由 遍歷生成復(fù)數(shù)router-link的例子
今天小編就為大家分享一篇vue路由 遍歷生成復(fù)數(shù)router-link的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子
今天小編就為大家分享一篇vue keep-alive 動(dòng)態(tài)刪除組件緩存的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要介紹了vue 全局引用公共的組件以及公共的JS文件問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Vue3中進(jìn)行二維碼的生成與解碼實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題
這篇文章主要介紹了vue2項(xiàng)目使用element-ui的el-tabs組件導(dǎo)致瀏覽器崩潰卡死問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
vue中調(diào)用百度地圖獲取經(jīng)緯度的實(shí)現(xiàn)
最近做個(gè)項(xiàng)目，需要實(shí)現(xiàn)獲取當(dāng)前位置的經(jīng)緯度，所以本文主要介紹了vue中調(diào)用百度地圖獲取經(jīng)緯度的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章給大家分享了Vue實(shí)例以及生命周期的相關(guān)知識(shí)點(diǎn)內(nèi)容，有興趣的朋友們可以學(xué)習(xí)下。2018-08-08
vue中使用v-if,v-else來(lái)設(shè)置css樣式的步驟
我們?cè)谑褂胿ue項(xiàng)目開(kāi)發(fā)時(shí)，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來(lái)綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過(guò)改變他的狀態(tài)來(lái)改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來(lái)設(shè)置css樣式,需要的朋友可以參考下2023-03-03
Vue中@change、@input和@blur的區(qū)別及@keyup介紹
這篇文章主要給大家介紹了關(guān)于Vue中@change、@input和@blur的區(qū)別及@keyup介紹的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-02-02