Angular 5 toastr提示插件小结

最新推荐文章于 2024-09-05 08:12:55 发布

星南樱射-S

最新推荐文章于 2024-09-05 08:12:55 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular5 文章标签： Angular5 toastr 弹出提示

本文链接：https://blog.youkuaiyun.com/xnyssxy/article/details/80067774

Angular5 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了ngx-toastr的通知组件的安装步骤与基本使用方法，包括如何配置样式、位置及显示时间等，并提供了示例代码。

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

ngx-toastr

https://github.com/scttcper/ngx-toastr

Demo:

https://scttcper.github.io/ngx-toastr/

1.安装

  npm install ngx-toastr --save
 

需要依赖@angular/animations

  npm install @angular/animations --save
 

如果不想用这个依赖，可以参考（但是通常都会安装aimations的）：

https://github.com/scttcper/ngx-toastr#setup-without-animations

2.添加css样式：

在.angular-cli.json中添加

  "
  styles
  "
  : [
 

  "
  styles.scss
  "
  ,
 

  "
  ../node_modules/ngx-toastr/toastr.css
  "
 

  ]
 

3.根模块注入：

  import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; //需要
 
  import { ToastrModule } from 'ngx-toastr';
 
  ...
 
  imports: [
 
     ...
 
      BrowserAnimationsModule,
 
      ToastrModule.forRoot()
 
  ]

4.使用：

  import { ToastrService } from 'ngx-toastr';
 
  ...
 
  constructor(
  public toastr: ToastrService
  ) {}
 
  showSuccess() {
 
      this
  .
  toastr
  .
  success
  (
  '
  Hello world!
  '
  , 
  '
  Toastr fun!
  '
  );
 
  }

可以对toastr做一些配置，比如，显示的位置，显示时间，显示颜色等等

  this.toastr.warning('Too high!', 'Warning!',
 
      {
 
        timeOut: 0,
 
        closeButton: false,
 
        positionClass: 'toast-top-center'
 
      }
 
    );