淺談angular4.0中路由傳遞參數(shù)、獲取參數(shù)最nice的寫法
研究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)開始了。
實(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中書寫跳轉(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的寫法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)底部側(cè)邊工具欄的實(shí)例代碼，文中通過(guò)分享一段代碼介紹vue 側(cè)邊導(dǎo)航欄遞歸顯示功能,需要的朋友可以參考下2018-09-09
VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能實(shí)例
這篇文章主要給大家介紹了關(guān)于VUE?html5-qrcode實(shí)現(xiàn)H5掃一掃功能的相關(guān)資料,html5-qrcode是輕量級(jí)和跨平臺(tái)的QR碼和條形碼掃碼的JS庫(kù),集成二維碼、條形碼和其他一些類型的代碼掃描功能,需要的朋友可以參考下2023-08-08
vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目實(shí)現(xiàn)面包屑導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了VUE表達(dá)式{{}}中如何拼接字符問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法
這篇文章主要介紹了Element中的Cascader（級(jí)聯(lián)列表）動(dòng)態(tài)加載省\市\(zhòng)區(qū)數(shù)據(jù)的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03
Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)詳情
這篇文章主要介紹了Vue?動(dòng)態(tài)路由的實(shí)現(xiàn)，動(dòng)態(tài)路由是一個(gè)常用的功能，根據(jù)后臺(tái)返回的路由json表，前端動(dòng)態(tài)顯示可跳轉(zhuǎn)的路由項(xiàng)，本文主要實(shí)現(xiàn)的是后臺(tái)傳遞路由，前端拿到并生成側(cè)邊欄的一個(gè)形勢(shì)，需要的朋友可以參考一下2022-06-06
maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作
這篇文章主要介紹了maptalks+three.js+vue webpack實(shí)現(xiàn)二維地圖上貼三維模型操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue滾動(dòng)頁(yè)面到指定位置的實(shí)現(xiàn)及避坑
這篇文章主要介紹了Vue滾動(dòng)頁(yè)面到指定位置的實(shí)現(xiàn)及避坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue解決彈出蒙層滑動(dòng)穿透問(wèn)題的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue的主要思想是組件化開發(fā),路由用來(lái)配置組件對(duì)應(yīng)展示路徑,本文給大家介紹vue中路由router配置步驟,創(chuàng)建路由文件——使用路由——配置路由出口,使路由配置內(nèi)容展示在頁(yè)面上,感興趣的朋友跟隨小編一起看看吧2023-12-12