前言

上一篇Routing Basics 介紹基本用法後,今天要來多加說明如何帶參數,以及如何使用程式碼navigate到其他route。

Passing Parameters to a Route

首先要記得在Route設定傳參數的path

path
  • ts
1
{ path: 'detail/:id', component: DetailComponent },

接著使用routerLink的第二個參數就可以達成傳遞參數的基本方式

link
  • html
1
2
3
<ul>
<li><a [routerLink]="['/detail',1]">Detail with parameter</a></li>
</ul>

在componet import ActivatedRoute,使用snapshot就可以取得參數值了

component
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

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

detailId = '';
constructor(private _route : ActivatedRoute) { }

ngOnInit() {
this.detailId = this._route.snapshot.params["id"];
}

}

Activating a Route with Code

這部分就很簡單,只要綁定事件後,在事件的method裡面navigate就可以了。 不過首先我們還是要先import Router,這樣才可以使用navigate。

navigate
  • ts
1
2
3
4
5
6
7
import { Router } from '@angular/router';

constructor(private _router : Router) { }

onBack(): void{
this._router.navigate(['/detail']);
}

參考

route