angular6 使用信息提示框toast

阳光穿透心脏的1/2处 2021-11-09 14:40 558阅读 0赞

angular6 可以使用的toast插件有好多个，在目前来看ngx-toastr在过去一年时间的使用量和受欢迎程度可以说是一骑绝尘，如下图：

![1467859-20190703214945766-1254472563.png][]

我也就选择了ngx-toastr这个插件，使用步骤如下：

**1、安装ngx-toastr和它的依赖@angular/animations**

npm install ngx-toastr --save
    npm install @angular/animations --save

**2、在angular-cli.json中添加css样式**

"styles": [
      "styles.scss",
      "node_modules/ngx-toastr/toastr.css"
    ]

**3、在app.module中导入相关模块**

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
    import { ToastrModule } from 'ngx-toastr';
    import { AppComponent } from './app.component';
     
    @NgModule({
      imports: [
        BrowserAnimationsModule,
        ToastrModule.forRoot()
      ],
      bootstrap: [AppComponent],
      declarations: [AppComponent]
    })
    class AppModule {}

**4、使用toast**

import { ToastrService } from 'ngx-toastr';
     
    @Component({...})
    export class YourComponent {
      constructor(private toastr: ToastrService) {}
     
      showSuccess() {
        this.toastr.success('Hello world!', 'Toastr fun!');
      }
    }

可以设置toast的消失时间为3秒：

this.toastr.success('Hello world!', 'Toastr fun!', {timeOut: 3000})

对toast做一些其他的配置可参考：[https://github.com/scttcper/ngx-toastr\#options][https_github.com_scttcper_ngx-toastr_options]

转载于:https://www.cnblogs.com/lucky-heng/p/11129462.html

[1467859-20190703214945766-1254472563.png]: /images/20211109/12a0d0cf349c4ca8b2ad8b1d12294320.png
[https_github.com_scttcper_ngx-toastr_options]: https://github.com/scttcper/ngx-toastr#options

发表评论取消回复

表情：

评论列表（有 0 条评论，558人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Vant完成各种Toast提示框

效果展示： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub...

痛定思痛。/ 2024年04月19日 07:09/ 0 赞/ 53 阅读

相关框式交换机指示灯提示信息

框式交换机指示灯都在各个部件的面板上，共有颜色有三种：红、黄、绿。一般情况下， “红”表示部件有故障或重要告警，需要及时处理。“黄”表示部件有次要告警或处于临界状态，需要及

古城微笑少年丶/ 2022年12月25日 13:56/ 0 赞/ 119 阅读

相关 React Native 自定义实现【Toast】提示框

今天和大家分享一篇自定义View的内容。一、简介之前和大家分享的自定义View内容，我们知道自定义View一般分为三个步骤：（1）

曾经终败给现在/ 2022年06月06日 02:28/ 0 赞/ 938 阅读

相关 Angular——提示框

今天做了一下提示框，也是模仿的，所以下面我就来简单解释一下如何制作提示框，以及解析一下代码和逻辑。其实整个逻辑思路很简单，就是先在前台用HTML的p-dialog

比眉伴天荒/ 2022年05月26日 13:26/ 0 赞/ 397 阅读

相关设置提示信息框并缓存

手机中常见的一种提示方式：弹出一个黑色的提示框，然后几秒后消失；原理也非常简单：创建一个dom，将显示的内容放到dom中，然后使用定时器定时，到指定的时间后删除dom。

女爷i/ 2022年05月13日 04:58/ 0 赞/ 204 阅读

相关自己手动写一个js 的toast提示框

闲来无聊，就尝试着自己写一个toast,因为之前写网页是一直会用到的，所以就自己造了个轮子，也当作学习记录（有不好的地方请多多指教），下面贴代码 <!DOCTYPE

素颜马尾好姑娘i/ 2022年05月08日 08:56/ 0 赞/ 239 阅读

相关 angular6 使用信息提示框toast

angular6 可以使用的toast插件有好多个，在目前来看ngx-toastr在过去一年时间的使用量和受欢迎程度可以说是一骑绝尘，如下图： ![1467859-20190

阳光穿透心脏的1/2处/ 2021年11月09日 14:40/ 0 赞/ 559 阅读

相关 ajax实现输入框提示信息

![20181112145906611.png][] HtmlPage1.html <head> <meta charset="utf-8" />

淡淡的烟草味﹌/ 2021年09月16日 23:32/ 0 赞/ 414 阅读

相关 Android ——Toast提示框

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

た入场券/ 2021年07月25日 11:54/ 0 赞/ 528 阅读

相关 taro 提示框Toast、Modal提示框、Loading加载动图和ActionSheet底部选项卡

Toast Taro.showToast({ title:'吐司', duration:20

╰+攻爆jí腚メ/ 2021年07月25日 00:27/ 0 赞/ 1880 阅读