本篇小喵筆記如何在Angular 2中，對於QueryString的讀取與網址導向使用的範例
緣起
在Web開發中，難免帶參數給其他的網頁。這樣的方式，如何在Angular 2 中使用，小喵做個簡單的範例，筆記一下，提供未來參考。
注入Router 與 ActivatedRoute
在 Angular2 中，要取得Query，需要透過ActiveRoute，以訂閱的方式來獲得。而導向其他的路由路徑時，則需要透過 Router 來處理
因此，我們 component 的 ts 檔中，在 constructor中，注入 router:Router, route:ActivatedRoute，語法如下：
constructor(private router:Router, private route:ActivatedRoute) { }
在Router與ActivatedRoute上，按下『Ctrl + . 』，透過 Auto套件，幫我們 Import 如下
import { Router, ActivatedRoute } from "@angular/router";
取得QueryString
假設小喵目前路徑是『http://localhost:4200/prod?id=10』
在 ngOnInit 的事件中，我們透過 route.queryParams.subscribe 訂閱取得 id，放如一個屬性id:number，語法如下：
id:number=0;
ngOnInit() {
this.route.queryParams.subscribe((value)=>{
this.id=parseInt(value['id']);
console.log(this.id);
});
}
如此就可以取得id，當沒有 querystring 的時候，會是 undefined
設定QueryString於路徑上
接著，示範如何透過 router 來設定並導向到包含 QueryString 的路徑
我們新增兩個 function，分別是idAdd, idMinus，來加減id，並傳到路徑中，相關語法如下：
idAdd(){
this.id+=1;
console.log(this.id.toString());
this.router.navigate(['prod'],{queryParams:{id:this.id}});
}
idMinus(){
this.id-=1;
console.log(this.id.toString());
this.router.navigate(['prod'],{queryParams:{id:this.id}});
}
透過 router.navigate，進行導向。加上queryParams的設定，來設定後面的QueryString
在html中安排按鈕
最後，實做按鈕來進行 id 加減 1 並導向回自己，並帶加減後的id於QueryString中
<button type="button" (click)="idAdd()">id+1</button>
<br>
<button type="button" (click)=idMinus()>id-1</button>
就醬子，可以把 QueryString 取得，並加減1，後再帶入回路徑中
完整範例：
最後，完整的程式碼如下
html:
<p>
prod works!
</p>
<button type="button" (click)="idAdd()">id+1</button>
<br>
<button type="button" (click)=idMinus()>id-1</button>
ts:
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from "@angular/router";
@Component({
selector: 'app-prod',
templateUrl: './prod.component.html',
styleUrls: ['./prod.component.css']
})
export class ProdComponent implements OnInit {
constructor(private router:Router, private route:ActivatedRoute) { }
id:number=0;
ngOnInit() {
this.route.queryParams.subscribe((value)=>{
this.id=parseInt(value['id']);
});
}
idAdd(){
this.id+=1;
console.log(this.id.toString());
this.router.navigate(['prod'],{queryParams:{id:this.id}});
}
idMinus(){
this.id-=1;
console.log(this.id.toString());
this.router.navigate(['prod'],{queryParams:{id:this.id}});
}
}
以上範例小喵筆記，提供自己未來參考，也提供給有需要的網友們參考。
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |