iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
0
Modern Web

從零開始的Angular前端開發系列 第 25

# DAY 25 Routing (三)

DAY 25 Routing (三)

路由參數

我們的路由,配置到目前為止,已經可以切換頁面,但是如果我們要讀取 URL 的參數列,比如說這樣:

我有一個參數叫 A,他的 value123,我想要把它讀進來,該怎麼做呢?

首先我們要先知道,在定義路由時,可以這樣寫:

 { path: 'home/:id', component:  HomepageComponent}

這邊的 :id,在我們的定義裡,是一個一定要傳入的參數,也就是說,我這邊要輸入 home/123home/AAA ... 等等的 URL,才能成功比對路由位址,顯示畫面,總之就是 :id 不能為空。當然只要是冒號開頭,後面接自己喜歡的變數名稱都可以,不一定要是 id

上面這個例子是一定要傳入參數 id,但也有不一定要傳入參數的方式,就是用我們熟悉的 Query string:

http://localhost:4200/home?name1=value1&name2=value2

就是在網址後面用問號串接,並以 & 分隔每一個參數。

要實現這個功能,需要用到 ActivatedRoute 這個 Service。我們想在 HomepageComponent 上面實作,所以我們把它注入進 HomepageComponent

 // homepage.component.ts
 import { ActivatedRoute, ParamMap} from '@angular/router';
 
   constructor(private route: ActivatedRoute) { }

然後在 ngOnit() 加入取得參數的程式碼:

  name;
  ngOnInit() {
    this.name = this.route.snapshot.queryParamMap.get('name');
}

這樣就會抓到第一次載入這個 component 時的變數 name

http://localhost:4200/home?name=fansen

結果:

要注意傳參數還有一種格式,是使用分號分隔的,長的像這樣:

http://localhost:4200/home;name=fansen;number=123;

Angular 也可以吃這種參數格式,但程式碼就要稍微改一下:

  name;
  ngOnInit() {
    this.name = this.route.snapshot.paramMap.get('name');
}

paramMap 取代 queryParamMap,就可以吃這種格式的參數。

路由導航

如果我們要實作「登入成功後轉向首頁或是其他頁面」,就會需要讓Angular 幫我們自動轉向頁面,這時候就要使用另一個 Service Router,我們一樣把它注入到 Component 裡:

// homepage.component.ts

import { ActivatedRoute, ParamMap, Router } from '@angular/router';

constructor(private route: ActivatedRoute, private router: Router) { }

接下來我們調用 navigate() 這個 function,第一個參數要傳入陣列,跟之前 routerLink 的概念一樣,如果網址是/login/name/info 的話,就傳入 ['/login','name','info'],當然也可以夾入變數:

// homepage.component.ts

  navigate() {
    this.router.navigate(['/login']);
  }

然後 binding 到一個 button 上:

// homepage.component.html

<button (click)="navigate()">Navigate To Login</button>

這樣點擊按鈕就會轉向 http://localhost:4200/login 了:



還有另一個 function 叫 navigateURL(),這個 function 傳入的參數就是一個字串,以剛剛的網址為例,就是傳入 /login/name/info 即可:

// homepage.component.ts

  navigateURL() {
    this.router.navigateByUrl('/login');
  }

然後除了最常用的第一個參數外,我們還發現有個 extras?: NavigationExtras 參數,我們可以拿它來做點甚麼:

比如說在導向新頁面時,想要將 Query String 加進去,當然我們可以用自幹的方式,拼出一個 Query String 再串接到網址後面,
類似這樣的想法:

queryString = '?name=name123&naumber=1' 
url = '/login' + queryString

但是有了 NavigationExtras,就不需要這麼麻煩了,我們只需要建一個 NavigationExtras 物件,然後把 Query String 像物件一樣一組一組擺進去:

// homepage.component.ts

  navigate() {
    const options: NavigationExtras  = {
      queryParams : {
        name: 'name123',
        number: 1
      }
    };
    this.router.navigate(['/login'], options);
 }

轉向新頁面時就會加上參數:

queryParams 也可以和 routerLink 一起用:

<a routerLink="/login" [queryParams]="{ name: 'name123', number: 1}"></a>

最後如果不想讓別人看到路由位址的話,可以在 NavigationExtras 加入 skipLocationChange: true
這樣在跳轉頁面時,URL就不會改變,但是 queryParams 的參數一樣會傳送出去:

// homepage.component.ts

const options: NavigationExtras  = {
      queryParams : {
        name: 'name123',
        number: 1
      },
      skipLocationChange: true
    };


可以看到 URL 還是在 /home 但是頁面已經切到/login。傳出去的 name123 也有正確的被抓到。
搭配 routerLink 的話,在屬性加入 skipLocationChange 即可:

<a routerLink="/login" [queryParams]="{ name: 'name123', number: 1}" skipLocationChange></a>

其實路由是一個很大的主題,這邊講的功能都只是冰山一角,比方說在登入機制方面,Angular 也有設計一些配套措施,歡迎大家做更深的研究。


上一篇
# DAY 24 Routing (二)
下一篇
# DAY 26 整合架構
系列文
從零開始的Angular前端開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言