動態改變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）來跳轉對應的頁面獲取不同的頁面信息