NavigationExtras

Represents the extra options used during navigation.

表示在导航时用到的额外选项。

interface NavigationExtras { relativeTo?: ActivatedRoute | null queryParams?: Params | null fragment?: string preserveQueryParams?: boolean queryParamsHandling?: QueryParamsHandling | null preserveFragment?: boolean skipLocationChange?: boolean replaceUrl?: boolean }

属性

属性名类型说明
relativeTo

Enables relative navigation from the current ActivatedRoute.

允许从当前激活的路由进行相对导航。

Configuration:

配置:

[{ path: 'parent', component: ParentComponent, children: [{ path: 'list', component: ListComponent },{ path: 'child', component: ChildComponent }] }]

Navigate to list route from child route:

child 路由导航到 list 路由:

@Component({...}) class ChildComponent { constructor(private router: Router, private route: ActivatedRoute) {} go() { this.router.navigate(['../list'], { relativeTo: this.route }); } }
queryParams

Sets query parameters to the URL.

设置 URL 的查询参数。

// Navigate to /results?page=1 this.router.navigate(['/results'], { queryParams: { page: 1 } });
fragment

Sets the hash fragment for the URL.

设置 URL 的哈希片段(#)。

// Navigate to /results#top this.router.navigate(['/results'], { fragment: 'top' });
preserveQueryParams

Preserves the query parameters for the next navigation.

在后续导航时保留查询(?)参数。

deprecated, use queryParamsHandling instead

已废弃,请用 queryParamsHandling 代替

// Preserve query params from /results?page=1 to /view?page=1 this.router.navigate(['/view'], { preserveQueryParams: true });
queryParamsHandling

config strategy to handle the query parameters for the next navigation.

配置后续导航时对查询(?)参数的处理策略。

// from /results?page=1 to /view?page=1&page=2 this.router.navigate(['/view'], { queryParams: { page: 2 }, queryParamsHandling: "merge" });
preserveFragment

Preserves the fragment for the next navigation

在后续导航时保留#片段

// Preserve fragment from /results#top to /view#top this.router.navigate(['/view'], { preserveFragment: true });
skipLocationChange

Navigates without pushing a new state into history.

导航时不要把新状态记入历史

// Navigate silently to /view this.router.navigate(['/view'], { skipLocationChange: true });
replaceUrl

Navigates while replacing the current state in history.

导航时不要把当前状态记入历史

// Navigate to /view this.router.navigate(['/view'], { replaceUrl: true });