[하이브리드앱 ionic]시작해보기 7 - 페이지이동하면서 toast 창 보이기

app.component.html

<ion-button expand="block" fill="solid" color="light" class="nomember-btn" (click)=presentToast();>비회원으로 이용하기</ion-button>

버튼을 하나 만들고, 

(click)=presentToast();

클릭하면 toast 창을 띄우도록 만든다.

 

 

app.component.ts

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
//토스트창
import { ToastController } from '@ionic/angular';
//페이지이동
import { NavController } from '@ionic/angular';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  
  constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    //토스트
    public toastController: ToastController,
    //페이지이동
    public navCtrl: NavController
  ) {
    this.initializeApp();  
  }

//토스트창 띄우기
  async presentToast() {
    const toast = await this.toastController.create({
      message: '비회원으로 로그인되었습니다.', // 문구
      duration: 2000 // 보여질 시작
    });
    toast.present();
    this.navCtrl.navigateForward('이동할페이지경로'); // 창띄우면 페이지가 이동됨
    //페이지가 이동하더라도 지정된 시간동안 지속됨 

  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

 

}

 

app.scss

ion-toast{
	--background : rgba(0,0,0,0.5);
	--color: #fff;
}

원하는 css를 적용한다.