Skip to content

Routes#

Route 包含以下屬性#

path
  • 路徑
  • 在route path當中使用 '**' → 以上皆非，所以要放在path最下面
  • 可以定義參數，例如 → :id、:user 
    { path: `product/${:id}, ....................` }
component
  • 符合路徑時要啟動的元件
title
  • 頁面的名字
data
  • 可以自訂額外的資料，也可以不傳遞
redirectTo
  • 重新導向的URL
  • path 預設空字串
  • pathMatch 必須指定此屬性
    • full 確保路徑完整符合URL
    • 預設是 prefix ，路徑由左檢查只要部分符合就會套用
outlet
  • 放在對應的routerOutlet
children
  • 子路由的 Routes 物件，指定巢狀路由
<a routerLink = 'page1'></a>
<a [routerLink] = "[ '../', 'page1' ]"></a>
<a [routerLink] = "[ '/', 'customer', 'Company1' ]"> </a>
  • 使用 / 為絕對路徑，會從根路由開始找
  • 使用 ./ 為相對路徑，會從當前路由的子結點路徑開始找
  • 使用 ../ 會從上一級結點找 → 相對父路徑

routerLinkActive#

  • 一個屬性指令，在賦予值的時候須加上單引號，否則angular會認為是變量
  • 在路由active時可以添加class在DOM元素上，url變化時才會移除
  • Router.navigate()
    • 以 [] 路徑陣列傳遞參數 
      this.router.navigate(['/', 'product', 'product', id )]
  • Router.navigateByUrl()
    • 以路徑字串傳遞 
      this.router.navigateByUrl(`/product/product'${id}`);

接收參數#

  • 使用 ActiveRoute 的 snapshot 

    constructor(private route: ActivatedRoute) {}

  • 在 ngDoCheck() 獲取參數值 

    ngDoCheck(): void {
    let ID = this.route.snapshot.paramMap.get('id');
    this.id = Number(ID);   
}