ng-toastr的使用

ng-toastr的使用

1.安装

npm install ngx-toastr --save

同时需要安装依赖包

npm install @angular/animations --save

如果你不想引入animations，可以在模块中进行设计

import { ToastrModule, ToastNoAnimation, ToastNoAnimationModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    // ...
 
    // BrowserAnimationsModule no longer required
    ToastNoAnimationModule.forRoot(),
  ],
  // ...
})
class AppModule {}

2.引入样式

// regular style toast 
@import '~ngx-toastr/toastr';
 
// bootstrap style toast 
// or import a bootstrap 4 alert styled design (SASS ONLY) 
// should be after your bootstrap imports, it uses bs4 variables, mixins, functions 
@import '~ngx-toastr/toastr-bs4-alert';
 
// if you'd like to use it without importing all of bootstrap it requires 
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~ngx-toastr/toastr-bs4-alert';

或者直接在angular.json下的schematics下添加,

具体angular.json的介绍点这里 https://www.cnblogs.com/momoli/p/13900813.html 具体angular.json的介绍点这里

"styles": [
  "styles.scss",
  "node_modules/ngx-toastr/toastr.css" // try adding '../' if you're using angular cli before 6
]

3.引入组件

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
import { ToastrModule } from 'ngx-toastr';
 
@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule, // required animations module
    ToastrModule.forRoot(), // ToastrModule added
  ],
  bootstrap: [App],
  declarations: [App],
})
class MainModule {}

4.使用

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

5.个性样式

ToastrService.success/error/warning/info/show()

也可定义不同类型的消息提示

Option	Type	Default	Description
toastComponent	Component	Toast	Angular component that will be used
closeButton	boolean	false	Show close button
timeOut	number	5000	Time to live in milliseconds
extendedTimeOut	number	1000	Time to close after a user hovers over toast
disableTimeOut	boolean |	'timeOut' | 'extendedTimeOut'	false
easing	string	'ease-in'	Toast component easing
easeTime	string | number	300	Time spent easing
enableHtml	boolean	false	Allow html in message
progressBar	boolean	false	Show progress bar
progressAnimation	'decreasing' | 'increasing'	'decreasing'	Changes the animation of the progress bar.
toastClass	string	'ngx-toastr'	Class on toast
positionClass	string	'toast-top-right'	Class on toast container
titleClass	string	'toast-title'	Class inside toast on title
messageClass	string	'toast-message'	Class inside toast on message
tapToDismiss	boolean	true	Close on click
onActivateTick	boolean	false	Fires changeDetectorRef.detectChanges() when activated. Helps show toast from asynchronous events outside of Angular's change detection

例子：

this.toastrService.error('everything is broken', 'Major Error', {
  timeOut: 3000,
});

6.全局样式

全局样式会覆盖上述的个性样式

在根组件进行设置

// root app NgModule
imports: [
  ToastrModule.forRoot({
    timeOut: 10000,
    positionClass: 'toast-bottom-right',
    preventDuplicates: true,
  }),
],

Option	Type	Default	Description
maxOpened	number	0	Max toasts opened. Toasts will be queued. 0 is unlimited
autoDismiss	boolean	false	Dismiss current toast when max is reached
iconClasses	object	iconClasses = { error: 'toast-error', info: 'toast-info', success: 'toast-success', warning: 'toast-warning', };	Classes used on toastr service methods
newestOnTop	boolean	true	New toast placement
preventDuplicates	boolean	false	Block duplicate messages
countDuplicates	boolean	false	Displays a duplicates counter (preventDuplicates must be true). Toast must have a title and duplicate message
resetTimeoutOnDuplicate	boolean	false	Reset toast timeout on duplicate (preventDuplicates must be true)
includeTitleDuplicates	boolean	false	Include the title of a toast when checking for duplicates (by default only message is compared)