Angular路由参数传递
发布时间:2020-12-17 07:02:55 所属栏目:安全 来源:网络整理
导读:一、路由时传递参数的方式 1、在查询参数中传递数据,如 //前台页面 a routerLink="/product" [queryParams]="{id:1}"商品详情/a//后台页面获取参数 export class ProductComponent implements OnInit { private productId: number; constructor(private rou
一、路由时传递参数的方式 1、在查询参数中传递数据,如 //前台页面 <a routerLink="/product" [queryParams]="{id:1}">商品详情</a> //后台页面获取参数 export class ProductComponent implements OnInit { private productId: number; constructor(private routeInfo: ActivatedRoute) { } ngOnInit() { this.productId = this.routeInfo.snapshot.queryParams[‘id‘]; } }
相应的后台获取是:ActivedRoute.queryParams[id] 2、在路由路径中传递数据, //前台页面 <a [routerLink]="[‘product‘,1]">商品详情</a> //后台页面,先修改路由定义,app-routing.modules.ts中 const routes: Routes = [ {path: ‘product/:id‘,component: ProductComponent},{path: ‘**‘,component: HomeComponent},]; this.productId = this.routeInfo.snapshot.params[‘id‘]; ? 在路由定义时,定义为 3、在路由配置中传递数据 1 //前台页面 2 <input type="button" value="商品详情" (click)=‘toProductDetails()‘ > 3 //后台页面 4 toProductDetails() { 5 this.router.navigate([‘/product‘,2]); 6 } 7 this.routeInfo.params.subscribe((params: Params) => this.productId = params[‘id‘]); ? 二、后台接收路由参数方式 1、snapshot和subscribe两种,区别在于在路由地址不变的情况下,若参数发送变化后者所接收的参数也会随之变化,前者不变。 ? 三、路由重定向 访问一个特定的地址时,会将其重定向到另一个指定的地址 //在定义路由时 {path: ‘‘,redirectTo: ‘/home‘,pathMatch: ‘full‘ },{path: ‘home‘,component : HomeComponent}, (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |