ThinkChat🤖让你学习和工作更高效,注册即送10W Token,即刻开启你的AI之旅 广告
## 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`