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