前言

上一篇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