ionic3 Toast组件

最新推荐文章于 2023-09-18 21:31:11 发布

weixin_30701521

最新推荐文章于 2023-09-18 21:31:11 发布

阅读量122

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/longailong/p/10450527.html

本文介绍了一个使用Angular和Ionic框架创建Toast提示组件的例子。通过HTML和TS文件的结合，展示了如何在点击按钮后显示带有自定义消息和持续时间的Toast。此示例适用于希望在其Angular应用中加入Toast通知功能的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html页面

<button ion-button color="dark"  class="button-block" (click)="showToast()">Toast提示</button>

ts文件

import { Component } from '@angular/core';
import { ToastController } from 'ionic-angular';


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

  constructor(public toastCtrl: ToastController) {

  }

 
  showToast(){
    let toast = this.toastCtrl.create({
      message: '用户名不能为空',
      duration: 3000
    });
    toast.present();
  }

}

转载于:https://www.cnblogs.com/longailong/p/10450527.html