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

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

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

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

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

<div class="contentful">

<ul>

　　<li *ngFor="let item of xxx;let key= index;">

　　　　<a [routerLink]="[‘/xxx/’，key]" >

　　</li>

</ul>

 

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中

　　　　<li *ngFor = "let game of games">

　　　　　　<a [routerLink] ="['/gift',game.app_id]">礼包</a>

　　　　</li>

　　在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<any>{

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

  　　　}

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