Dynamically change the path of a tag (pass parameter)

Click and jump on multiple a tags looped out, but due to the loop, the jump path of the a tag can only give at most one, so when the looped a tag jump is also on the same page, the following appears Ways to solve Click different a label button to jump to different page content

1. Make routing settings in your root route

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

2. Set in the a tag you need to jump

<div class="contentful">

<ul>

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

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

　　</li>

</ul>

 

3. On the jump page, that is, the page that accepts different information

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

　　3.2 Make a declaration here in the constructor

　　　　constructor(public route:ActivatedRoute)

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

---

 

Example: I need to jump to the a tag in the index, and jump to the corresponding data under the display name in the gift according to the different a in the index

　　In index.html

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

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

　　　　</li>

　　Write the same on the gift page, the difference is in the logical part of the page

 

　　In gift.component.ts

　　1. Introduce ActivateRoute first

　　2. Make a declaration in the constructor

　　　　contsructor(public route:ActivatedRoute){}

　　3. Use paramMap to receive

　　　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)

　　　　　　}

　　　　)　　

　　})

　　

　　Analysis: 　this.playseService.getGiftList (appid) is to use the service. The so-called service is where the data request is used. Here is the data request for the gift list

　　　　 giftListUrl:string =`xxxxxxxxxx`;

 　　　　getGiftList(appId: number):Observable<any>{

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

  　　　}

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