Version 6 of Angular Now Available!Learn MoreHome
  • 特性
  • 文档
  • 资源
  • 会议
  • 博客
  • 关于中文版
快速上手
简介
应用的“外壳”
1. 英雄编辑器
2. 显示英雄列表
3. 主从组件
4. 服务
5. 路由
6. HTTP
架构概览
模块(NgModule)简介
组件简介
服务与 DI 简介
后续步骤
显示数据
模板语法
用户输入
生命周期钩子
组件交互
组件样式
Angular 自定义元素
动态组件
属性型指令
结构型指令
管道
简介
响应式表单
模板驱动表单
表单验证
动态表单
可观察对象(Observable)
RxJS 库
Angular 中的可观察对象
用法实战
与其它技术的比较
引导启动
NgModule 简介
JS 模块 vs NgModule
常用模块
特性模块的分类
入口组件
特性模块
服务提供商
单例服务
惰性加载的特性模块
共享 NgModule
NgModule API
NgModule 常见问题
Angular 依赖注入
多级注入器
DI 提供商
DI 实战
浏览组件树
HttpClient
路由与导航
简介
转场与触发器
复杂序列
可复用动画
路由转场动画
安全
国际化 (i18n)
简介
快速起步
与 Service Worker 通讯
生产环境下的 Service Worker
Service Worker 配置
服务端渲染
升级步骤
更关注性能的升级方式
AngularJS 与 Angular 的概念对照
CLI 简介
add
build ( b )
config
doc ( d )
e2e ( e )
generate ( g )
help
lint ( l )
new ( n )
run
serve ( s )
test ( t )
update
version ( v )
xi18n
项目文件结构
Workspace Configuration
npm 包
TypeScript 配置
预先(AOT)编译
构建与运行
测试
发布
浏览器支持
语言服务
保持最新
Angular 发布策略与实践
速查表
风格指南
词汇表
API 参考手册
2018 ngChina @ 杭州open_in_new
互助问答open_in_new
官方 Material 组件库open_in_new
ng-zorro 组件库open_in_new
ng-zorro mobile 组件库open_in_new
API > @angular/router
mode_edit code

RouterLinklink

  • NgModule
  • 选择器
  • 属性
  • 说明
  • 方法
  • onClick()

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

Lets you link to specific routes in your app.

查看"说明"...

NgModulelink

  • RouterModule
          
          RouterModule
        

选择器link

  • :not(a)[routerLink]

属性link

属性说明
@Input()
queryParams: { [k: string]: any; }
@Input()
fragment: string
@Input()
queryParamsHandling: QueryParamsHandling
@Input()
preserveFragment: boolean
@Input()
skipLocationChange: boolean
@Input()
replaceUrl: boolean
@Input()
state?: { [k: string]: any; }
@Input()
routerLink: string | any[]
Write-only.
@Input()
preserveQueryParams: boolean
Write-only.
urlTree: UrlTree 只读

说明link

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

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

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

If the link is static, you can use the directive as follows: <a routerLink="/user/bob">link to user component</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.

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

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

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

Multiple static segments can be merged into one (e.g., ['/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>
      
      <a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">
  link to user component
</a>
    

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

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

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

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

<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment> link to user component </a>
      
      <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': merge the queryParams into the current queryParams

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

    'preserve': preserve the current queryParams

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

    default/'': use the queryParams only

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

Same options for NavigationExtras#queryParamsHandling.

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

You can provide a state value to be persisted to the browser's History.state property (See https://developer.mozilla.org/en-US/docs/Web/API/History#Properties). It's used as follows:

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

And later the value can be read from the router through router.getCurrentNavigation. For example, to capture the tracingId above 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});
});
    

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

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

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

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

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

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

欲知详情,参见 createUrlTree。

See createUrlTree for more information.

方法link

onClick() link

mode_edit code
onClick(): boolean
      
      onClick(): boolean
    
参数

没有参数。

返回值

boolean

  • RouterLink
  • NgModule
  • 选择器
  • 属性
  • 说明
  • 方法
  • onClick()

资源

  • 关于
  • 资源列表
  • 宣传资料
  • 博客

帮助

  • Stack Overflow
  • Gitter
  • 报告问题
  • 行为规范

社区

  • 活动
  • 聚会
  • Twitter
  • GitHub
  • 做贡献

多语言

  • English Version
  • 日本語版

Powered by Google ©2010-2018. 代码授权方式:MIT-style License. 文档授权方式:CC BY 4.0.

当前版本:7.2.0-build.84+sha.a4fc5f8.