網頁

2019/6/16

Angular 使用Router Parameters 路由參數

本篇介紹如何使用Router Parameters來傳入路由參數,並在Component中取得參數。

首先使用Angular CLI建立一個Angular專案
專案建好後先把app.component.html的預設內容刪除,修改如下

app.component.html

<h1>Angular Router Paramter Demo</h1>
<router-outlet></router-outlet>

接著建立一個HelloComponent元件。


HelloComponent建好後,開啟app-routing.module.ts
const routes: Routes陣列中新增導向HelloComponentRoute
{ path:'hello/:name', component:HelloComponent }

hello/後面的:name標記就是Router Parameter,在URL hello/<name>後的路徑本身除了是path外,也是一個參數,key值為name,所以叫做路由參數Router Parameter。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component';

const routes: Routes = [
  { path:'hello/:name', component:HelloComponent } // <-- 新增導向HelloComponent的路徑 :name為RouterParameter
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

修改hello.component.html如下。

hello.component.html

<h1>Hello {{ name }}</h1>
{{ name }}用來顯示HelloComponent.name屬性的值。


接著修改hello.component.ts,在HelloComponent的建構式中注入ActivatedRoute物件,並在Component初始方法ngOnInit()中從ActivatedRoute物件route中取得Router Parameter,並賦值給HelloComponent.name

hello.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {

  constructor( private route: ActivatedRoute ) { } // <-- 在建構式注入ActivatedRoute

  name = ''; // <-- 新增屬性

  ngOnInit() {
    this.name = this.route.snapshot.paramMap.get('name'); // <-- 從route的snapshot取得Router Parameter:name
  }

}

Route路徑及參數資訊存放在注入的ActivatedRoute物件,其屬性snapshotActivatedRouteSnapshot,記錄了在路由當時的Router Parameter的值。


設定好後執行ng serve啟動Angular專案。

在瀏覽器位址輸入http://localhost:4200/,畫面如下。




接著在後面加上/hello/ケンシロウ
也就是http://localhost:4200/hello/ケンシロウ,輸入後效果如下。




/hello後面的路由參數為必填,如果只是輸入http://localhost:4200/hello並無法找到對應的URL,在console會顯是下面錯誤。

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'hello'
Error: Cannot match any routes. URL Segment: 'hello'


參考:

沒有留言:

張貼留言