ìonic2 - 如何動態設置頁面

Question

我正在一個項目中，我有一套練習，當我點擊練習時，我導航到其他頁面，您可以播放本練習的視頻。我現在要做的是以下情況：

這是我的Home.html：

<ion-card *ngIf="oefening1" (click)="navigate(oefening1, oefening2, oefening3, oefening4)"> 
<img src="assets/img/{{ oefening1 }}.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)="navigate(oefening2, oefening1, oefening3, oefening4)"> 
    <img src="assets/img/{{ oefening2 }}.jpg"/> 
    <ion-card-content> 
     <ion-card-title>{{ oefening2 }}</ion-card-title> 
     <p>Setjes: {{ set2 }}</p> 
     <p>Herhalingen: {{ rep2 }}</p> 
    </ion-card-content> 
    </ion-card> 

這是home.ts我的導航功能：

navigate(exercise, exercise2, exercise3, exercise4){ 
    this.navCtrl.push(ExercisePage, { 
      clickedExercise: exercise, 
      secondExercise: exercise2, 
      thirdExercise: exercise3, 
      fourthExercise: exercise4 
    }); 
    } 

這是我的exercise.html：

<ion-content padding overflow-scroll="true"> 
    <ion-grid> 
    <ion-row> 
    <ion-col col-12> 
     <div (click)="playVid()" padding-bottom> 
     <img *ngIf="fullPath" [src]="fullPath"/> 
     </div> 
     <div text-center> 
     <button ion-button block [disabled]="!disabledBtn">Block Button</button> 
     <button ion-button round (click)="nextExercise()">Voltooi</button> 
     </div> 
    </ion-col> 
    </ion-row> 
    </ion-grid> 
</ion-content> 

個

而且exercise.ts：

export class ExercisePage { 
    public clickedExercise: any; 
    public secondExercise: any; 
    public thirdExercise: any; 
    public fourthExercise: any; 
    public fullPath: string; 
    public disabledBtn: boolean; 

    constructor(public navCtrl: NavController, private streamingMedia: StreamingMedia, public params:NavParams) { 
    this.clickedExercise = params.get("clickedExercise"); 
    this.secondExercise = params.get("secondExercise"); 
    this.thirdExercise = params.get("thirdExercise"); 
    this.fourthExercise = params.get("fourthExercise"); 
    this.disabledBtn = false; 
    } 

    playVid(){ 
    console.log('video completed'); 

    setTimeout(() => { 
     this.disabledBtn = true; 
    }, 10000); 

    // Playing a video. 
    let options: StreamingVideoOptions = { 
     successCallback:() => { console.log('Video played') }, 
     errorCallback: (e) => { console.log('Error streaming') }, 
     orientation: 'portrait' 
    }; 

    this.streamingMedia.playVideo('http://www.sylvanreinieren.com/fysioWebapp/videos/'+ this.clickedExercise + '.mp4', options); 
    } 

    ionViewWillEnter() { 
    this.fullPath = "assets/img/" + this.clickedExercise + ".jpg"; 
    // console.log('secondExercise:',this.secondExercise, 'ThirdExercise: ', this.thirdExercise, 'Fourth: ', this.fourthExercise); 
    } 

    nextExercise(){ 
    this.clickedExercise = this.secondExercise; 
    this.secondExercise = this.thirdExercise; 
    this.thirdExercise = this.fourthExercise; 

    this.navCtrl.push(ExercisePage, { 
     clickedExercise: this.secondExercise, 
     secondExercise: this.thirdExercise, 
     thirdExercise: this.fourthExercise 
    }); 

    console.log('nextExercise', this.clickedExercise); 
    } 
} 

所以基本上我想達到的目標是，當我點擊按鈕，nextExercise下一個練習有展現的方法，但它似乎跳過第二行使。當它通過所有練習時，它必須回到家中。

有誰知道如何正確實現這一點？

Answer 1

所以，正如我所說，我認爲這是在一個滑塊有這個更好。爲什麼？

• 你已經知道有多少演習有，在這種情況下，4
• 每navCtrl.push你做的是一個新的頁面，它沒有更新和現有的頁面。
• 如果有一天你擴展並且每頁有20個練習，你不想讓你的用戶點擊20次，如果他/她想離開練習。
• 這很容易操作。

在這種情況下，我只會關注練習頁面，如果您想要更改主頁並讓它更具動態性，我們也可以爲此做些事情。

Exercise.html

<ion-content overflow-scroll="true"> 
    <ion-slides> 
     <ion-slide *ngFor="let ex of allExercises; let i = index"> 
      <ion-grid> 
       <ion-row> 
        <ion-col col-12> 
         <div (click)="playVid(ex.exercise)" padding-bottom> 
          <img [src]="ex.path" /> 
         </div> 
         <div text-center> 
          <!-- can't go back if it's the first exercise --> 
          <button *ngIf="i == 0" ion-button round (click)="previousExercise()">Previous</button> 
          <button ion-button block [disabled]="!disabledBtn">Block Button</button> 
          <!-- will not have a next exercise if it's the last one --> 
          <button *ngIf="i == ;" ion-button round (click)="nextExercise()">Voltooi</button> 
         </div> 
        </ion-col> 
       </ion-row> 
      </ion-grid> 
     </ion-slide> 
    </ion-slides> 
</ion-content> 

Exercises.ts

import { Slides } from 'ionic-angular'; 
export class ExercisePage { 
    public fullPath: string; 
    public disabledBtn: boolean; 
    public allExercises: any[] = []; // INITIALIZE A VAR THAT'LL HOLD ALL EXERCISES 

    constructor(
     public navCtrl: NavController, 
     private streamingMedia: StreamingMedia, 
     public params: NavParams, 
     public slides: Slides 
    ) { 
     // GET ALL EXERCISES AND THE IMAGE PATH ON PAGE CONSTRUCRION 
     this.allExercises.push({ 
      exercise: params.get("clickedExercise"), 
      path: 'assets/img/' + params.get("clickedExercise") + '.jpg' 
     }); 
     this.allExercises.push({ 
      exercise: params.get("secondExercise"), 
      path: 'assets/img/' + params.get("secondExercise") + '.jpg' 
     }); 
     this.allExercises.push({ 
      exercise: params.get("thirdExercise"), 
      path: 'assets/img/' + params.get("thirdExercise") + '.jpg' 
     }); 
     this.allExercises.push({ 
      exercise: params.get("fourthExercise"), 
      path: 'assets/img/' + params.get("fourthExercise") + '.jpg' 
     }); 
     this.disabledBtn = false; 

     // block the swipe to change page 
     slides.lockSwipes(true); 
    } 

    playVid(exercise: string) { 
     console.log('video completed'); 

     setTimeout(() => { 
      this.disabledBtn = true; 
     }, 10000); 

     // Playing a video. 
     let options: StreamingVideoOptions = { 
      successCallback:() => { console.log('Video played') }, 
      errorCallback: (e) => { console.log('Error streaming') }, 
      orientation: 'portrait' 
     }; 

     this.streamingMedia.playVideo('http://www.sylvanreinieren.com/fysioWebapp/videos/' + exercise + '.mp4', options); 
    } 

    nextExercise() { 
     this.slides.lockSwipes(false); 
     this.slides.slideNext(); 
     this.slides.lockSwipes(true); 
    } 

    // If you want to let the user go back to previous exercise 
    previousExercise() { 
     this.slides.lockSwipes(false); 
     this.slides.slidePrev(); 
     this.slides.lockSwipes(true); 
    } 
} 

所以你創建一個對象，會抓住你所有的演習。

在這個對象中，你推動練習和圖像路徑（因爲我不知道什麼和練習是，我假設它只是它的名字）。

您將導入幻燈片組件並鎖定滑動，以便用戶無法使用滑動更改幻燈片（如果需要，可以讓他執行此操作）。

在您的HTML中，只需使用ion-slides標記和ion-slide以及*ngFor即可完成所有練習。

在您的playVid()中，您將傳遞演習的名稱以播放視頻。

希望這會有所幫助