แก้ไขไฟล์ src/app/app.component.ts
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!"); }); }); } }
เรียกใช้ฟังก์ชัน showAlert()
แก้ไขไฟล์ src/pages/home/home.ts
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'); } }
แก้ไขไฟล์ src/pages/home/home.html
<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>
[BOXMOBILEDEV] Ionic 3 EP10 : การใช้ Logout UI และ การใช้ Events