## NavigationExtras 表示在導航過程中使用的額外選項。 ### 接口定義 ```typescript interface NavigationExtras { relativeTo : ActivatedRoute queryParams : Params fragment : string preserveQueryParams : boolean preserveFragment : boolean skipLocationChange : boolean replaceUrl : boolean } ``` ### 屬性 - relativeTo : `ActivatedRoute` 在當前路由開啟相對路徑導航 配置： ```typescript [{ path: 'parent', component: ParentComponent, children: [ { path: 'list', component: ListComponent }, { path: 'child', component: ChildComponent } ] }] ``` 從child路由導航到list路由 ```typescript @Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } } ``` - queryParams : `Params`設置URL的查詢參數 ```typescript // Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } }); ``` fragment : `string` 設置URL的has片段 ```typescript // Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' }); ``` - preserveQueryParams : `boolean` 將查詢參數帶到下一個導航 ```typescript // Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true }); ``` - preserveFragment : `boolean` 將片段帶到下一個導航 ```typescript // Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true }); ``` - skipLocationChange : `boolean` 導航時不向history中添加記錄 ```typescript // Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true }); ``` replaceUrl : `boolean` 替換當前狀態在history中的記錄值 ```typescript // Navigate to /view this.router.navigate(['/view'], { replaceUrl: true }); ```