首页 > 建站教程 > 前端框架 >  angular路由传参正文

angular路由传参

angular路由传参方式主要有3种,说明:

第一种:在查询参数中传递数据

/product?id=1&name=2 => ActivatedRoute.queryParams[id]


第二种:在路由路径中传递数据

{path: /product/:id } =>/product/1 => ActivatedRoute.params[id]


第三种:在路由配置中传递数据

{path: /product, component: ProductComponent, data:[{ isProd:true }]} => ActivatedRoute.data[0][isProd]


一、在查询参数中传递数据

1、在app.component.html中

<a [routerLink] = "['/product']"  [queryParams] = "{id:1}">产品ID</a>


2、在product.component.ts中接收参数 

import {ActivatedRoute} from '@angular/router';
export class ProductComponent implements OnInit {
  private productId: number;
  constructor( private routerInfo: ActivatedRoute ){}
  ngOnInit() {
    this.productId  = this.routerInfo.snapshot.queryparams["id"] ;
  }
}


3、在product.component.html中

<p>产品Id是:{{productId}}</p>


二、在路由路径中传递数据

1、在app-routing.module.ts

{path:'product/:id', component: ProductComponent}


2、在app.component.html中

<a [routerLink]="['/product',1]">商品详情</a>


3、在product.component.ts中

import {ActivatedRoute} from '@angular/router';
export class ProductComponent implements OnInit {
  private productId: number
  constructor(private routerInfo: ActivatedRoute){}
  ngOnInit() {
    this.productId = this.routerInfo.snapshot.params["id"];
  }
}