离子2-如何根据单击的卡动态设置NextPage

Question

我有一个类似卡的页面：

<ion-card *ngIf="oefening1" (click)="test($event)" id="lagerugklacht" class="lagerugklacht">
<img src="assets/img/lagerugklacht.jpg"/>
<ion-card-content>
  <ion-card-title>{{ oefening1 }}</ion-card-title>
  <p>Setjes: {{ set1 }}</p>
  <p>Herhalingen: {{ rep1 }}</p>
</ion-card-content>

<ion-card *ngIf="oefening2" (click)="test()">
    <img src="assets/img/nekklacht.jpg"/>
    <ion-card-content>
      <ion-card-title>{{ oefening2 }}</ion-card-title>
      <p>Setjes: {{ set2 }}</p>
      <p>Herhalingen: {{ rep2 }}</p>
    </ion-card-content>
  </ion-card>

我想做的是，当我单击其中一张卡时，我将根据您单击的卡动态设置视频URL的页面。

所以我尝试的是拾取id="lagerugklacht"，并基于NavParam，我想设置视频URL。但是看来它并没有在我的控制台上拾取父ID。也许有一种正确的方法？

这是我的click event

的示例

 test(event){
   console.log(event);
   console.log(event.srcElement.attributes.id);
   var idAttr = event.srcElement.attributes.id;
   var value = idAttr.nodeValue;
   console.log(value);
  // this.navCtrl.push(ExercisePage);
}

也许可以通过单击事件传递{{ oefening1 }}？

Answer 1

我认为您可能会过度复杂化 - 只需将页面的标识符传递到您的navigate方法中 - 即，在单击卡时触发的方法。

。

所以，您的模板：

<ion-card *ngIf="oefening1" (click)="navigate('oefening1')" id="lagerugklacht" class="lagerugklacht">
  <img src="assets/img/lagerugklacht.jpg"/>
  <ion-card-content>
    <ion-card-title>{{ oefening1 }}</ion-card-title>
    <p>Setjes: {{ set1 }}</p>
    <p>Herhalingen: {{ rep1 }}</p>
  </ion-card-content> 
</ion-card>

和您的组件中：

navigate(card: string){
  this.navCtrl.push(ExercisePage, {
    card: card
  });
}

然后在练习组件中，您可以使用NavParams

拔出card

在练习中：

class ExerciseComponent {
  constructor(private navParams: NavParams) {
     ....
     let card = navParams.get('card');
     // have fun with card value here
     ....
  }
}