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