填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

UrlCreationOptions

本選項用來修改 Router 的 URL。向 Router 導航功能提供包含任何這些屬性的物件,以控制應如何構造目標 URL。

Options that modify the Router URL. Supply an object containing any of these properties to a Router navigation function to control how the target URL should be constructed.

      
      interface UrlCreationOptions {
  relativeTo?: ActivatedRoute | null
  queryParams?: Params | null
  fragment?: string
  queryParamsHandling?: QueryParamsHandling | null
  preserveFragment?: boolean
}
    

參見

屬性

屬性說明
relativeTo?: ActivatedRoute | null

允許從當前啟用的路由進行相對導航。

Specifies a root URI to use for relative navigation.

比如,考慮下列路由器配置,parent 路由擁有兩個子路由。

For example, consider the following route configuration where the parent route has two children.

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

下面的 go() 函式會把目標 URI 解釋為相對於已啟用路由 child 的,從而導航到 list 路由。

The following go() function navigates to the list route by interpreting the destination URI as relative to the activated child route

      
      @Component({...})
class ChildComponent {
  constructor(private router: Router, private route: ActivatedRoute) {}

  go() {
    this.router.navigate(['../list'], { relativeTo: this.route });
  }
}
    

A value of null or undefined indicates that the navigation commands should be applied relative to the root.

queryParams?: Params | null

設定 URL 的查詢引數。

Sets query parameters to the URL.

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

設定 URL 的雜湊片段(#)。

Sets the hash fragment for the URL.

      
      // Navigate to /results#top
this.router.navigate(['/results'], { fragment: 'top' });
    
queryParamsHandling?: QueryParamsHandling | null

如何在路由器連結中處理查詢引數以進行下一個導航。為下列值之一:

How to handle query parameters in the router link for the next navigation. One of:

  • preserve :保留當前引數。

    preserve : Preserve current parameters.

  • merge :合併新的當前引數。

    merge : Merge new with current parameters.

“preserve” 選項將放棄所有新的查詢引數:

The "preserve" option discards any new query params:

      
      // from /view1?page=1 to/view2?page=1
this.router.navigate(['/view2'], { queryParams: { page: 2 },  queryParamsHandling: "preserve"
});
    

“merge” 選項會將新的查詢引數附加到當前 URL 的引數中:

The "merge" option appends new query params to the params from the current URL:

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

queryParams 物件中的引數之間發生鍵名衝突,則使用新值。

In case of a key collision between current parameters and those in the queryParams object, the new value is used.

preserveFragment?: boolean

在後續導航時保留 # 片段

When true, preserves the URL fragment for the next navigation

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