动态改变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)来跳转对应的页面获取不同的页面信息

  

猜你喜欢

转载自www.cnblogs.com/rockyjs/p/12759978.html