angular6 使用信息提示框toast

angular6 能夠使用的toast插件有好多個，在目前來看ngx-toastr在過去一年時間的使用量和受歡迎程度能夠說是一騎絕塵，以下圖：

我也就選擇了ngx-toastr這個插件，使用步驟以下：

一、安裝ngx-toastr和它的依賴@angular/animations

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

 

二、在angular-cli.json中添加css樣式

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

 

三、在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 {}

 

四、使用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