[筆記][Angular 2][Angular 4][queryString]在Angular 2中讀取QueryString、導向使用QueryString的範例

本篇小喵筆記如何在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}});
    }

}

以上範例小喵筆記,提供自己未來參考,也提供給有需要的網友們參考。

 

 


以下是簽名:


Microsoft MVP
Visual Studio and Development Technologies
(2005~2019/6)