V Ionic (ver.5) aplikácii je vhodné pridať funkcionalitu zobrazovania tzv.toast-u (ti.krátkodobo zobrazenej informácie o tom, že sa vykonala/vykonáva nejaká akcia).
Pre toto si v aplikácii vytvorím samostatný servis "alert", príkazom:
ionic generate service services/alert
vo vytvorenom súbore "alert.service.ts" doplniť kód:
import { Injectable } from '@angular/core';
import { ToastController } from '@ionic/angular';
@Injectable({
providedIn: 'root'
})
export class AlertService {
constructor(
private toastController: ToastController
) { }
// zobrazenie toast informacnyho alert-u:
async presentToast(message: any) {
const toast = await this.toastController.create({
message: message,
duration: 2000,
position: 'bottom',
color: 'success'
});
toast.present();
}
}
Úlohou tohto servisu bude zobraziť "toast" s požadovaným textom/informáciou.
A teraz na stránke, kde vykonávam nejakú operáciu a chcem tam zobraziť tento toast/alert, napr.v súbore "mytags.page.ts" doplniť takýto kód:
import { Component, OnInit } from '@angular/core';
import { ApiService } from '../../services/api.service';
import { NavController } from '@ionic/angular';
import { AlertService } from '../../services/alert.service';
@Component({
selector: 'app-mytags',
templateUrl: './mytags.page.html',
styleUrls: ['./mytags.page.scss'],
})
export class MytagsPage implements OnInit {
pageContent = null;
constructor(
private api: ApiService,
private navCtrl: NavController,
private alertService: AlertService
) { }
...
ngOnInit() {
// ToDo: ID prihlaseneho user-a:
const loggedUserID = 3;
this.api.getUserTags(loggedUserID).subscribe((response) => {
console.log(response);
this.pageContent = response;
});
}
// naspat na predchadzajucu stranku:
previousPage() {
this.navCtrl.back();
}
// zmaze vybraty tag:
deleteTag(TagID) {
// ToDo: ID prihlaseneho user-a:
const loggedUserID = 3;
this.api.deleteTag(TagID).subscribe((response) => {
console.log('tag ID: '+TagID);
this.pageContent = response;
console.log(response);
this.alertService.presentToast('tag (ID: '+TagID+') successfully deleted');
// a znovu nacitaj/refreshni stranku:
this.ngOnInit();
});
}
}
tj.je tu pridaná referencia na tento servis, a pri vykonávaní funkcie "deleteTag()" sa volá zobrazenie toast-u (alertu) v ktorom bude informácia (že sa tag s daným ID úspešne vymazal).
...
Top comments (0)