## RouterLink
链接到应用中指定的部分。
### 如何使用
考虑下面这样一个路由配置
```
[{ path: 'user/:name', component: UserCmp }]
```
想要链接到路由 `user/:name`,可以这样写
```html
<a routerLink='/user/bob'>link to user component</a>
```
### 类定义
```typescript
class RouterLink {
constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy)
queryParams : {[k: string]: any}
fragment : string
preserveQueryParams : boolean
preserveFragment : boolean
routerLink
onClick(button: number, ctrlKey: boolean, metaKey: boolean) : boolean
urlTree : UrlTree
}
```
### 类描述
RouterLink指令能够链接到应用中指定区域。
如果使用静态链接,可以像下面这样直接使用
```html
<a routerLink="/user/bob">link to user component</a>
```
如果是动态生成的链接,可以传递一个数组带有路径片段,以及后续每一个参数的片段。
例如 `['/team', teamId, 'user', userName, {details:true}]`,表示我们想要链接到地址 `/team/11/user/bob;details=true`
多个静态片段可以合并到一个(示例:`['/team/11/user'], username, {details: true}`)
第一个片段名可以使用/, ./, 或者 ../ 开关
- 如果片段以 `/` 开始,路由器会以应用的根路由查找起点
- 如果片段以 `./` 开始,或者不以斜线开始中,路由器会从当前路由的子节点路径开始查找
- 如果片段以 `../` 路由会从上一级节点为查询路径
使用以下方式设置查询参数和片段
```html
<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education">link to user component</a>
```
这会生成链接 `/user/bob#education?debug=true`
也可以直接告诉当前指令保留当前查询参数和片段
```html
<a [routerLink]="['/user/bob']" preserveQueryParams preserveFragment>link to user component</a>
```
The router link directive always treats the provided input as a delta to the current url.
例如:当前路由地址为 `/user/(box//aux:team),接下来点击链接 <a [routerLink]="['/user/jim']">Jim</a>` 会生成链接 `/user/(jim/aux:team)`
### 属性
- queryParams : {[k: `string`]: `any`}
- fragment : `string`
- preserveQueryParams : `boolean`
- preserveFragment : `boolean`
- routerLink
- onClick(button: `number`, ctrlkey: `boolean`, metakey: `boolean`) : `boolean`
- urlTree : `UrlTree`
- 说明
- angular 1.x
- ngModelController
- ngOptions
- ngModelOptions
- lifecycle
- directive
- angular 2
- @angular/forms
- 类
- AbstractControl
- AbstractControlDirective
- AbstractFormGroupDirective
- FormControl
- FormArray
- FormBuilder
- FormGroup
- NgControl
- 接口
- controlValueAccessor
- 指令
- DefaultValueAccessor
- Angular 2 生命周期
- OnInit
- DoCheck
- @angular/router
- 配置
- Routes
- 指令
- RouterOutlet
- RouterLink
- 接口
- ActivatedRoute
- UrlTree
- NavigationExtras
- ActivatedRouteSnapshot
- RouterStateSnapshot
- 类
- UrlSegment
- UrlSegmentGroup
- UrlSerializer
- DefaultUrlSerializer
- Router
- bug记得
- @angular/http
- 类
- Http
- Body
- Response
- ResponseOptions
- Header
- Request
- RequestOptions
- URLSearchParams
- @angular/core
- decorator
- Component-decorator
- animation
- DI
- linker
- TemplateRef
- ElementRef
- EmbeddedViewRef
- ViewRef
- ViewContainerRef
- Query
- ComponentFactory
- ComponentRef
- Renderer
- change_detection
- KeyValueDiffers
- IterableDiffers
- ChangeDetectorRef
- ChangeDetectionStrategy
- Zone
- ngZone
- @angular/common
- 指令
- NgTemplateOutlet
- QueryList
- bootstrap4
- card
- form
- 重点关注博客
- 学习过的文章
- 笔记
- Angular 2 双向绑定
- 将字符串解析成DOM
- rx相关
- operators
- combineLatest
- combineAll
- concat(All, Map, *MapTo)
- 背压(backpressure)
- js事件keycode对应表
- 装饰器
- 有用的代码摘录
- 日期操作
- 数量操作
- 字符操作
- rxjs问题
- 小示例
- h5面试准备
- react
- 开发遇到的问题