angular8 路由传参的几种方式

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：241

### `routerLink`指令传值 - 传参 ```  <a [routerLink]="['/detail']" [queryParams]="{ id: item.ID }">{{item.title}}</a> ``` - 接收值 ``` /* 导入ActiveRoute */ import { ActivatedRoute } from "@angular/router" constructor(private route:ActivatedRoute) { // 接收到传递过来的值 this.route.queryParams.subscribe((val: any) => { console.log(val); }); } ``` ### 动态路由 - 配置路由 ``` {path: 'detail/:id', component: ListComponent}, ``` - 传参 ``` /* 导入Router */ import { Router } from '@angular/router'; this.router.navigate(['/pages/models/field-table/' + id]); ``` - 接收值 ``` /* 导入ActiveRoute */ import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { this.modelId = this.activatedRoute.snapshot.params.model; } ``` ### 路由参数 - 传参 ``` import { Router } from '@angular/router'; this.router.navigate(['/results'], { queryParams: { page: 1 } }); ``` - 接收值 ``` /* 导入ActiveRoute */ import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { console.log(this.activatedRoute.snapshot.queryParams); } ```

标签： angular8 路由

上一篇：Found the synthetic property @showTooltip. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. 下一篇：复制控制台 console 的对象数据

angular8 路由传参的几种方式

随便看看

留言