שיעור 6 ב- ionic – מימוש כפתור חזרה לאחור

בפוסט זה נדגים יצירה של כפתור "חזור אחורה" (שאינו חלק מהתפריט העליון).

כפי שהסברתי באחד הפוסטים הקודמים, הניווט של ionic הוא למעשה מערך. עד כה בכפתורים שיצרנו בפוסט הקודם – רק הוספנו פריט למערך. כעת נציג דוגמא בה אנחנו מסירים פריט מהמערך – ולמעשה באותו רגע חוזרים לאחור.

  • הוספתי הזרקה של navController, וכמובן גם import מתאים.
  • מימשתי כפתור בקובץ ה-HTML.
  • מימשתי פונקציה עבור הכפתור בקובץ ה-Type Script.
קובץ ה-html
--------------------
<ion-header>
<ion-navbar>
<ion-title>MyTitle</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<p>שמי הוא {{ name }}</p>
<buttonion-button (click)="onGoBack()">Go Back</button>
</ion-content>


--------------
קובץ ה-ts
-------------
import { Component, OnInit } from '@angular/core';

import { NavParams, NavController } from 'ionic-angular';

@Component({

selector:'page-user',

templateUrl:'user.html'

})

export class UserPage implements OnInit {

name:string;

constructor(privatenavParams:NavParams,privatenavCtrl:NavController) {

}

ngOnInit() {

this.name=this.navParams.get("userName");

}

onGoBack() {

this.navCtrl.pop();

}

}

חזרה לעמוד הראשי ב- ionic

לאובייקט navController יש מתודה נחמדה שנקראת popToRoot והיא מסירה את כל העמודים, עד לעמוד הראשי – שימושי ביותר.

 

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *