GitHub：ngx-toastr 、演示地址：Demo
效果圖：

3.png

4.png

5.png

6.png

1.png

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

添加樣式，在angular.json：

2.png

在app.module.ts：

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 {}

ngx-toastr使用：

import { ToastrService } from 'ngx-toastr';

@Component({
  selector: 'app-test',
  templateUrl: './test.page.html',
  styleUrls: ['./test.page.scss']
})
export class TestComponent {
  constructor(private toastr: ToastrService) {}
  showToastr() {
    this.toastr.success('', '保存成功!',{
          timeOut:2000,
          positionClass:'toast-top-center'
    });
    this.toastr.info('', '信息!',{
          timeOut:2000,
          positionClass:'toast-top-center'
    });
    this.toastr.warning('', '警告!',{
          timeOut:2000,
          positionClass:'toast-top-center'
    });
    this.toastr.error('', '保存失敗!',{
          timeOut:2000,
          positionClass:'toast-top-center'
    });
  }
}

個(gè)人覺得，toastr也不是很美觀。。。。。。