RouterLink

Lets you link to specific routes in your app.

让你可以在应用中链接到特定的路由。

@Directive({ selector: ':not(a)[routerLink]' }) class RouterLink { queryParams: {...} fragment: string queryParamsHandling: QueryParamsHandling preserveFragment: boolean skipLocationChange: boolean replaceUrl: boolean set routerLink: any[] | string set preserveQueryParams: boolean get urlTree: UrlTree onClick(): boolean }

选择器

:not(a)[routerLink]

输入参数

queryParams 绑定到 RouterLink.queryParams
fragment 绑定到 RouterLink.fragment
queryParamsHandling 绑定到 RouterLink.queryParamsHandling
preserveFragment 绑定到 RouterLink.preserveFragment
skipLocationChange 绑定到 RouterLink.skipLocationChange
replaceUrl 绑定到 RouterLink.replaceUrl

说明

Consider the following route configuration: [{ path: 'user/:name', component: UserCmp }]. When linking to this user/:name route, you use the RouterLink directive.

考虑下列路由配置: [{ path: 'user/:name', component: UserCmp }]. 如果要链接到这个 user/:name 路由,你可以使用 RouterLink 指令。

If the link is static, you can use the directive as follows: <a routerLink="/user/bob">link to user component</a>

如果该链接是静态的,你可以使用下列指令: <a routerLink="/user/bob">链接到 user 组件</a>

If you use dynamic values to generate the link, you can pass an array of path segments, followed by the params for each segment.

如果你要用动态值来生成该链接,你可以传入一组路径片段,每个片段后面都可以跟一些参数。

For instance ['/team', teamId, 'user', userName, {details: true}] means that we want to generate a link to /team/11/user/bob;details=true.

比如 ['/team', teamId, 'user', userName, {details: true}] 表示我们要生成一个到 /team/11/user/bob;details=true 的链接。

Multiple static segments can be merged into one (e.g., ['/team/11/user', userName, {details: true}]).

多个静态片段可以合并为一个(比如 ['/team/11/user', userName, {details: true}])。

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

第一个参数名可以使用 /./../ 前缀:

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

    如果第一个片段用 / 开头,则路由器会从应用的根路由开始查找。

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

    如果第一个片段用 ./ 开头或者没有用斜杠开头,路由器就会从当前激活路由开始查找。

  • And if the first segment begins with ../, the router will go up one level.

    如果第一个片段以 ../ 开头,则路由器将会向上找一级。

You can set query params and fragment as follows:

你可以像这样设置查询参数和 # 片段:

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

RouterLink will use these to generate this link: /user/bob#education?debug=true.

RouterLink 将会使用它们生成如下链接:/user/bob#education?debug=true

(Deprecated in v4.0.0 use queryParamsHandling instead) You can also tell the directive to preserve the current query params and fragment:

(从 v4.0.0 中开始已废弃,请用 queryParamsHandling 来代替)你还可以告诉该指令保留当前的查询参数(?)和 # 片段:

<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment> link to user component </a>

You can tell the directive to how to handle queryParams, available options are:

你可以告诉该指令要如何处理查询参数,有效的选项包括:

  • 'merge': merge the queryParams into the current queryParams

    'merge':把老的查询参数合并进新的查询参数中

  • 'preserve': preserve the current queryParams

    'preserve':保持当前的查询参数

  • default/'': use the queryParams only

    默认 / '':只使用当前查询参数

Same options for NavigationExtras#queryParamsHandling.

这个选项和 NavigationExtras#queryParamsHandling 的一样。

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

The router link directive always treats the provided input as a delta to the current url.

RouterLink 指令总是把新提供的输入看作是对当前 URL 的增量修改。

For instance, if the current url is /user/(box//aux:team).

例如,如果当前 url 是 /user/(box//aux:team)

Then the following link <a [routerLink]="['/user/jim']">Jim</a> will generate the link /user/(jim//aux:team).

那么 <a [routerLink]="['/user/jim']">Jim</a> 生成的链接将是 /user/(jim//aux:team)

See createUrlTree for more information.

欲知详情,参见 createUrlTree

属性

属性名类型说明
queryParams
fragment
queryParamsHandling
preserveFragment
skipLocationChange
replaceUrl
routerLink
preserveQueryParams
urlTree只读

方法

onClick(): boolean

参数

没有参数。

返回值

boolean