שיעור 14 ב- ionic – חלון קופץ Modal

כדי להציג חלון קופץ, מה שנקרא Modal, נעשה כך :

  • נייבא את ModalController
  • נוסיף לקונסטרקטור משתנה מסוג ModalController
  • בפונקציה המתאימה, נקרא  למתודה create של ModalController, ונעביר לה כפרמטר את הקלאס של page שאנחנו רוצים להציג כחלון קופץ.
  • וכדי להציג, נשתמש במתודה present.

המחשה –

בדוגמא הבאה, הדף שאני מציג בתור חלון קופץ, נקרא QuotePage :

import { Component } from '@angular/core';
import { IonicPage, ModalController} from 'ionic-angular';
import { QuoteService } from './../../services/quote.service';
import { Quote } from './../../data/quote.interface';
import { QuotePage } from './../quote/quote';

@IonicPage()
@Component({
 selector: 'page-favorites',
 templateUrl: 'favorites.html',
})
export class FavoritesPage {
 quotes:Quote[];

 constructor(private quotesService:QuoteService,
 private modalCtrl:ModalController) {
 }

 ionViewDidLoad() {
 
 }
 ionViewWillEnter(){
 this.quotes = this.quotesService.getFavoriteQuotes();
 }

 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage);
 modal.present();
 }


}

 

אלא שיש בעיה קטנה …

אם נציץ בתצוגת mobile, בחלון הקופץ שבנינו, נראה שאנחנו לא יכולים לצאת ממנו.

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

בכל פעם שמזריקים את ViewController למחלקה, זה מאפשר לנו לגשת לעמוד הפעיל, העמוד שכרגע המשתמש נמצא בו.

המתודה שנשתמש בה היא dismiss, וכשמה כן היא – היא פשוט סוגרת את ה-view האקטיבי. (צריך להיזהר לא להפעיל אותה על root page 🙂 )

------ on the html file ------------


 <button ion-button color="danger"
 (click)="onClose()"
 >Close</button>

------ on the TS file --------------


import { Component } from '@angular/core';
import { IonicPage, ViewController } from 'ionic-angular';


@IonicPage()
@Component({
 selector: 'page-quote',
 templateUrl: 'quote.html',
})
export class QuotePage {
 constructor(private viewCtrl:ViewController) {}

 onClose() {
 this.viewCtrl.dismiss();
 }

}

איך להעביר מידע לחלון הקופץ ?

  • את המידע אנחנו מעבירים בפרמטר השני של יצירת האובייקט .
  • ואנחנו שולפים את המידע ( בעמוד הנפרד של החלון הקופץ )  דרך אובייקט navParams שאותו כבר הכרנו באחד השיעורים הקודמים
  • נקודה מעניינת לשים לב, היא שאני שולף את המידע באירוע המיוחד של ionic שנקרא ionViewDidLoad , והאירוע הזה מתרחש כל פעם מחדש, ולא נעשה לו cache.
העברת המידע בפרמטר השני



onViewQuote(quote:Quote) {

constmodal=this.modalCtrl.create(QuotePage,quote);

modal.present();

}

שליפת המידע בקלאס של הדף חלון שקופץ
ionViewDidLoad(){this.person=this.navParams.get('person');
this.text=this.navParams.get('text');
}

 העברת מידע מהחלון הקופץ, בחזרה אל החלון שהקפיץ אותו

  •  כדי לבצע זאת, נעביר פרמטר במתודה dismiss שסוגרת את החלון הקופץ
  • כדי לשלוף את הפרמטר שהעברנו , בחלון שהקפיץ , "נאזין" לאירוע הסגירה של ה-modal, באמצעות onDidDismiss, ושם נגדיר callback שמקבל פרמטר , וזהו הפרמטר שהעברנו מהחלון הקופץ.
  • חשוב לזכור ! העמוד שמתחת ל-modal לא מתרענן לאחר שה-modal נסגר, זאת אומרת שאם ביצענו דרך ה-modal שינוי כלשהוא שאמור להשפיע על הדף שמתחתיו – אז צריך לדאוג לבצע את השינוי (או לרענן את הדף).
----- on the modal page TS file -------

onClose(remove = false) {
 
 this.viewCtrl.dismiss(remove);
 
 
 }
 
 
----- on the under-laying page TS file -----
 onViewQuote(quote:Quote) {
 const modal = this.modalCtrl.create(QuotePage,quote);
 modal.present();
 modal.onDidDismiss((remove:boolean) =>{
 if(remove) {
 this.quotesService.removeQuoteFromFavorites(quote);
 }
 
 } );
 }

 

מילה על view hooks

כתיבת תגובה

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