路由導覽

說明

1. 利用Router物件可藉由程式進行路由導覽
2. 導覽的api有兩種：
   1. navigate()
   2. navigateByUrl()

navigateByUrl()

絕對位址導覽

router.navigateByUrl('/xxx/1')

navigate()

絕對位址導覽

router.navigate(['xxx', '1'])

相對位址導覽：相對於目前路由的網址路徑

router.navigate(['..', '1'], {
  relativeTo: this.activatedRoute
})

程式碼範例：

1.在app.component.html'''內的

```標籤內最下面增加兩個button

<li><button (click)="navigateByUrl()">navigateByUrl()</button></li>
<li><button (click)="navigate()">navigate()</button></li>

2.在app.component.ts內注入Router，並且加入navigateByUrl()與navigate()兩個方法

export class AppComponent {
  constructor(private router: Router){}
  title = 'app works!';

  navigateByUrl(){
    this.router.navigateByUrl("/child/c1");
  }

  navigate(){
    this.router.navigate(['child', 'c2']);
  }
}

3.點擊兩顆按鈕測試路由導覽