a标签传参接收_动态改变a标签的路径（传参）

针对循环出来的多个a 标签进行点击跳转，但是由于循环时，a 标签的跳转路径最多只能只能给出一个，这样循环出来的a标签跳转也是同一个页面的时候，出现以下方式进行解决点击不同的a标签按钮进行跳转到不同的页面内容中

1.在你的根路由中进行路由设置

{path：“xxx/:app_id”,component:xxxComponent}

2.在你需要跳转的a标签中进行设置

3.在跳转页，也就是说接受不同信息的页面中

3.1引入import {ActivateRoute} from '@angular/router'

3.2在constructor中在此进行声明一次

constructor(public route:ActivatedRoute)

3.3this.route.params.subscribe((res)=>{

console.log(res)

})

实例：  index中的a标签我需要跳转到 gift中去，根据index中不同的a跳转到gift中显示名下对应的数据

在index.html中

礼包

在gift页面中还是一样的进行编写，不同的在与页面逻辑部分

在gift.component.ts中

1.先引入ActivateRoute

2.在constructor中进行声明

contsructor(public route:ActivatedRoute){}

3.使用paramMap来接收

this.route.paramMap.subscribe(paramMap=>{

let appid  = parseInt(paramMap.get("appid"))

this.playseService.getGiftList(appid).subscribe(

resp=>{

this.packages = resp.data.packages;

},error=>{

console.log(error)

}

)

})

解析：this.playseService.getGiftList(appid)是使用服务了，所谓的服务就是使用数据请求的地方，这里是礼包列表数据请求

giftListUrl:string =`xxxxxxxxxx`;

getGiftList(appId: number):Observable{

return this.http.get(`${this.giftListUrl}/${appId}`,this.httpOptions);

}

在服务中有对数据进行一次传参请求，传递appid，使用appid它的数据类型是number，这里使用appid 就可以更好的解释上述使用a标签传参(appid)来跳转对应的页面获取不同的页面信息