תגית: ang

<ion-content padding>

     <buttonion-button>User A</button>

     <buttonion-button>User B</button>

</ion-content>

<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');
 }

}

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.