RouterLinklink

说明link

给定路由配置 [{ 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.

相对链接路径link

Relative link pathslink

第一段名称可以用 /、./ 或 ../ 开头。

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.

设置和处理查询参数和片段link

Setting and handling query params and fragmentslink

以下链接将查询参数和一个片段添加到所生成的 URL：

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

      
        content_copy
      
      <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:

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

请参阅 UrlCreationOptions#queryParamsHandling。

See UrlCreationOptions#queryParamsHandling.

保留导航历史link

Preserving navigation historylink

你可以提供要持久到浏览器的 History.state 属性中的 state 值。例如：

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

      
        content_copy
      
      <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:

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