แก้ไขไฟล์ src/app/app.component.ts

[code]
import { Component } from ‘@angular/core’;
import { Platform, Events } from ‘ionic-angular’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { TabsPage } from ‘../pages/tabs/tabs’;

@Component({
templateUrl: ‘app.html’
})
export class MyApp {
rootPage: any = TabsPage;

constructor(platform: Platform,
statusBar: StatusBar,
splashScreen: SplashScreen,
public events: Events) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
statusBar.styleDefault();
splashScreen.hide();

events.subscribe(‘alertmsg’, () => {
alert("Hello!");
});
});
}
}
[/code]

เรียกใช้ฟังก์ชัน showAlert()
แก้ไขไฟล์ src/pages/home/home.ts

[code]
import { Component } from ‘@angular/core’;
import { NavController, Events } from ‘ionic-angular’;

@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {

constructor(public navCtrl: NavController,
public events: Events) {

}

showAlert() {
this.events.publish(‘alertmsg’);
}

}
[/code]

แก้ไขไฟล์ src/pages/home/home.html

[code]
<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<h2>Welcome to Ionic!</h2>
<p>
This starter project comes with simple tabs-based layout for apps that are going to primarily use a Tabbed UI.
</p>
<p>
Take a look at the
<code>src/pages/</code> directory to add or change tabs, update any existing page or create new pages.
</p>
<button (click)="showAlert()" ion-button color="light">Click Me!</button>
</ion-content>
[/code]

[BOXMOBILEDEV] Ionic 3 EP10 : การใช้ Logout UI และ การใช้ Events