網頁

▼

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陣列中新增導向HelloComponent的Route：
{ 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物件，其屬性snapshot為ActivatedRouteSnapshot，記錄了在路由當時的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'


參考：

沒有留言:

張貼留言