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

RouterLink

當應用於範本中的元素時,使該元素成為開始導航到某個路由的連結。導航會在頁面上的 <router-outlet> 位置上開啟一個或多個路由元件。

When applied to an element in a template, makes that element a link that initiates navigation to a route. Navigation opens one or more routed components in one or more <router-outlet> locations on the page.

檢視"說明"...

NgModule

選擇器

屬性

屬性說明
@Input()
queryParams?: Params | null

作為 UrlCreationOptions 的一部分傳遞給 Router#createUrlTree

Passed to Router#createUrlTree as part of the UrlCreationOptions.

參見:

@Input()
fragment?: string

作為 UrlCreationOptions 的一部分傳遞給 Router#createUrlTree

Passed to Router#createUrlTree as part of the UrlCreationOptions.

參見:

@Input()
queryParamsHandling?: QueryParamsHandling | null

作為 UrlCreationOptions 的一部分傳遞給 Router#createUrlTree

Passed to Router#createUrlTree as part of the UrlCreationOptions.

參見:

@Input()
preserveFragment: boolean

作為 UrlCreationOptions 的一部分傳遞給 Router#createUrlTree

Passed to Router#createUrlTree as part of the UrlCreationOptions.

參見:

@Input()
skipLocationChange: boolean

作為 NavigationBehaviorOptions 的一部分傳遞給 Router#navigateByUrl

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

參見:

@Input()
replaceUrl: boolean

作為 NavigationBehaviorOptions 的一部分傳遞給 Router#navigateByUrl

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

參見:

@Input()
state?: { [k: string]: any; }

作為 NavigationBehaviorOptions 的一部分傳遞給 Router#navigateByUrl

Passed to Router#navigateByUrl as part of the NavigationBehaviorOptions.

參見:

@Input()
routerLink: string | any[]
只寫

傳遞給 Router#createUrlTree 的命令。

Commands to pass to Router#createUrlTree.

  • array :傳遞給 @link Router#createUrlTree Router#createUrlTree} 的命令。

    array: commands to pass to Router#createUrlTree.

    • string :僅包含字串的命令陣列的簡寫,即 ['/route']

      string: shorthand for array of commands with just the string, i.e. ['/route']

    • null | undefined :空命令陣列的簡寫,即 []

      null|undefined: shorthand for an empty array of commands, i.e. []

參見:

urlTree: UrlTree唯讀

說明

給定路由配置 [{ path: 'user/:name', component: UserCmp }] ,以下內容將建立一個到該路由的靜態連結:<a routerLink="/user/bob">link to user component</a>

Given a route configuration [{ path: 'user/:name', component: UserCmp }], the following creates a static link to the route: <a routerLink="/user/bob">link to user component</a>

你也可以使用動態值來產生連結。對於動態連結,請傳遞路徑段陣列,然後傳遞每個段的引數。例如, ['/team', teamId, 'user', userName, {details: true}] 產生到 /team/11/user/bob;details=true

You can use dynamic values to generate the link. For a dynamic link, pass an array of path segments, followed by the params for each segment. For example, ['/team', teamId, 'user', userName, {details: true}] generates a link to /team/11/user/bob;details=true.

多個靜態段可以合併為一個詞,並與動態段組合。例如, ['/team/11/user', userName, {details: true}]

Multiple static segments can be merged into one term and combined with dynamic segements. For example, ['/team/11/user', userName, {details: true}]

你提供給連結的輸入將被視為當前 URL 的增量。例如,假設當前 URL 是 /user/(box//aux:team)。則連結 <a [routerLink]="['/user/jim']">Jim</a> 會建立 URL /user/(jim//aux:team) 。欲知詳情,請參見 createUrlTree

The input that you provide to the link is treated as a delta to the current URL. For instance, suppose the current URL is /user/(box//aux:team). The link <a [routerLink]="['/user/jim']">Jim</a> creates the URL /user/(jim//aux:team). See createUrlTree for more information.

你可以在連結中使用絕對或相對路徑、設定查詢引數、控制如何處理引數以及保留導航狀態的歷史記錄。

You can use absolute or relative paths in a link, set query parameters, control how parameters are handled, and keep a history of navigation states.

第一段名稱可以用 /./../ 開頭。

The first segment name can be prepended with /, ./, or ../.

  • 如果第一個片段用 / 開頭,則路由器會從應用的根路由開始查詢。

    If the first segment begins with /, the router looks up the route from the root of the app.

  • 如果第一個片段用 ./ 開頭或者沒有用斜槓開頭,路由器就會從當前啟用路由開始查詢。

    If the first segment begins with ./, or doesn't begin with a slash, the router looks in the children of the current activated route.

  • 如果第一段以 ../ 開頭,則路由器將去往路由樹中的上一層。

    If the first segment begins with ../, the router goes up one level in the route tree.

設定和處理查詢引數和片段

Setting and handling query params and fragments

以下連結將查詢引數和一個片段新增到所產生的 URL:

The following link adds a query parameter and a fragment to the generated URL:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>
    

預設情況下,該指令使用給定的查詢引數構造新的 URL。該示例產生連結:/user/bob?debug=true#education

By default, the directive constructs the new URL using the given query parameters. The example generates the link: /user/bob?debug=true#education.

你可以透過在連結中使用 queryParamsHandling 選項,來指示該指令以不同的方式處理查詢引數。允許的值為:

You can instruct the directive to handle query parameters differently by specifying the queryParamsHandling option in the link. Allowed values are:

  • 'merge' :將給定的 queryParams 合併到當前查詢引數中。

    'merge': Merge the given queryParams into the current query params.

  • 'preserve' :保留當前的查詢引數。

    'preserve': Preserve the current query params.

例如:

For example:

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" queryParamsHandling="merge">
  link to user component
</a>
    

請參閱 UrlCreationOptions#queryParamsHandling

See UrlCreationOptions#queryParamsHandling.

保留導航歷史

Preserving navigation history

你可以提供要持久到瀏覽器的 History.state 屬性中的 state 值。例如:

You can provide a state value to be persisted to the browser's History.state property. For example:

<a [routerLink]="['/user/bob']" [state]="{tracingId: 123}"> link to user component </a>
      
      <a [routerLink]="['/user/bob']" [state]="{tracingId: 123}">
  link to user component
</a>
    

使用 Router#getCurrentNavigation 來檢索儲存的導航狀態值。例如,要在 NavigationStart 事件中捕獲 tracingId

Use Router#getCurrentNavigation to retrieve a saved navigation-state value. For example, to capture the tracingId during the NavigationStart event:

// Get NavigationStart events router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => { const navigation = router.getCurrentNavigation(); tracingService.trace({id: navigation.extras.state.tracingId}); });
      
      // Get NavigationStart events
router.events.pipe(filter(e => e instanceof NavigationStart)).subscribe(e => {
  const navigation = router.getCurrentNavigation();
  tracingService.trace({id: navigation.extras.state.tracingId});
});