שיעור 5 ב- ionic – העברת מידע בין דפים.

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

לצורך ההמחשה נדגים באמצעות דף שנקרא users (לשון רבים) , שמכיל 2 כפתורים, כל אחד מהם יעביר אותנו דף user (לשון יחיד) עם מידע על משתמש ספציפי.

כך זה נקרא בהתחלה :

<ion-content padding>

     <buttonion-button>User A</button>

     <buttonion-button>User B</button>

</ion-content>

נדגים את השינוי במספר שלבים :

  • נוסיף אירוע לכפתורים, שמעביר פרמטר של שם המשתמש
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט (users). – כלומר הקוד שמעביר  את המידע הלאה.
  • נבנה את הקוד שמטפל באירוע בקלאס של הקומפוננט המקבל (user) – כלומר הקוד שמקבל את המידע.

הערה :  אני מניח שבניתם את הדף הקודם, כלומר יש בו כבר data binding  למשתנה name בתוך תבנית ה-html של העמוד user. (קישור לפוסט הקודם).

שלב 1/3 – הוספת אירוע לכפתורים

בקובץ users.html נגדיר אירוע

<ion-content padding>

<buttonion-button (click)="onLoadUser('A')">User A</button>

<buttonion-button (click)="onLoadUser('B')">User B</button>

</ion-content>

שלב 2/3 – הקוד ששולח את המידע

בקובץ users.ts  , הוספתי יבוא לדף ה-user, וכתבתי פונקציה ששולחת  אליו מידע בתוך אובייקט.

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { UserPage } from './user/user';

@IonicPage()
@Component({
 selector: 'page-users',
 templateUrl: 'users.html',
})
export class UsersPage {

 constructor(public navCtrl: NavController, public navParams: NavParams) {
 }

 onLoadUser(name:string) {
 this.navCtrl.push(UserPage, {userName: name});
 }


 ionViewDidLoad() {
 console.log('ionViewDidLoad UsersPage');
 }

}

שלב 3/3 – הקוד שמקבל את המידע

  • בקובץ user.ts , הוספתי יבוא ל- OnInit, וגם ל- NavParams.
  • בנוסף מימשתי את קבלת המידע בפונקציה ngOnInit.
import { Component, OnInit } from '@angular/core';
import { NavParams } from 'ionic-angular';

@Component({
 selector: 'page-user',
 templateUrl: 'user.html'
})

export class UserPage implements OnInit {
 name:string;
 constructor(private navParams:NavParams) { 
 }

 ngOnInit() {
 this.name = this.navParams.get("userName");
 }

}

סיכום

  • בקריאה לאירוע העברנו פרמטר לפונקציה.
  • בקובץ שמטפל באירוע
    • עשינו import ל- navController.
    • עשינו import ל- navParams.
    • הזרקנו פנימה את navController + navParams דרך ה constructor.
    • הפונקציה שטיפלה בדחיפה (push) של עמוד ה-user, גם העבירה פרמטר יחד עם פעולת ה-push.
  • בקובץ שמטפל בקבלת האירוע ובטעינת הדף הפנימי 
    • עשינו import ל- navParams.
    • עשינו import ל-OnInit.
    • הוספנו בקלאס הצהרה שהוא ממשק את האינטרפייס : implements OnInit.
    • הזרקנו פנימה את navParams דרך ה-constructor.
    • מימשנו פונקציה של ngOnInit.
    • בתוך הפונקציה קיבלנו את התוכן מתוך המשתנה (שהזרקנו) של navParms.

הערה

כמו ששלחנו מידע באובייקט, והשתמשנו במתודה get, כדי לשלוף ערך לפי ה-key של המאפיין בתוך האובייקט.

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

כתיבת תגובה

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