Angular: 使用 ngx-toastr 库实现 toast 式对话框显示（适用于 Angular 7）

首先

迄今为止，我们一直在屏幕上通过弹出对话框(alert(“送信完了しました。”))来显示错误和消息，但是每次都要手动关闭，而且很不方便和不时髦，因此我尝试自动关闭且外观也酷炫的Toast显示方式的实现。
在调研之后发现有很多能简单实现Toast显示的库，但是我选择了下载量和Star数最多的ngx-toastr来尝试使用。

（2019-03-12 更新）
我在升级到Angular 7.2.8后，突然无法显示Toast消息了。
根据这个链接所述，原因似乎是与bootstrap的CSS类名冲突，因此在我的环境中，我在styles.scss中将Toast的不透明度设置为1后，问题得以解决。

#toast-container > div {
    opacity:1;
}

执行画面

我想你会发现，还准备了演示页面，仔细观看后会发现可以进行相当详细的设置。

行为环境

本次操作环境如下所示：已安装在最新版本(截至2018年12月)。

如果您正在使用Angular 4或5，您可能需要根据以下公式页面中的指定版本进行安装。

最初的设定

设定方法如下，虽然官方网页上有非常详细的介绍，但我还是想在这里简要提一下。

1. 安装 ngx-toastr 组件

npm install ngx-toastr --save

2. 安装 @angular/animations（如果已安装则不需要）

请先检查package.json文件，仅当未安装@angular/animations时才执行以下操作。

npm install @angular/animations --save

3. CSS文件的加载设置

对于Angular 6（Angular CLI v6）及更高版本的用户，请在angular.json中进行ngx-toastr CSS文件的读取设置。对于Angular 5（Angular CLI v1.7）及更早版本的用户，请在.angular-cli.json中进行这一设置。

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

"styles": [
  "styles.scss",
  "../node_modules/ngx-toastr/toastr.css"    // 頭に「../」が必要
]

4. 设置module.ts股票模块的配置

请在您的app.module.ts文件中进行以下设置（如果您使用子模块，请在子模块中进行设置）。

import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';    // add

import { ToastrModule } from 'ngx-toastr';    // add

@NgModule({
  imports: [
    CommonModule,
    BrowserAnimationsModule,    // add
    ToastrModule.forRoot()    // add
  ],
  bootstrap: [App],
  declarations: [App]
})
class AppModule {}

以上是初始设置的结束。

使用方法

只需要一种选项来用中文释义以下的内容：
通过this.toastr服务的type(‘消息’, ‘标题’, 选项)的形式调用，将显示toast消息。
在此示例中，进行了一些设置，如仅使错误对话框不自动关闭。

import { Component } from '@angular/core';
import { ToastrService } from 'ngx-toastr';    // add

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngx-toastr';

  constructor(
    private toastr: ToastrService    // add
  ) {}


  showSuccess() {
    this.toastr.success('Hello world!', 'Toastr fun!');
  }
  showError() {
    const config = {
      closeButton: true,
      disableTimeOut: true,
      tapToDismiss: false
    };
    this.toastr.error('This is error message. Fix me!', 'Error', config);
  }
  showWarning() {
    this.toastr.warning('Warning!', 'Warning');
  }
  showInfo() {
    this.toastr.info('Info message.');
  }
}

  <button class="btn btn-primary" type="button" (click)="showSuccess()"> Success </button>
  <button class="btn btn-danger" type="button" (click)="showError()"> Error </button>
  <button class="btn btn-warning" type="button" (click)="showWarning()"> Warning </button>
  <button class="btn btn-info" type="button" (click)="showInfo()"> Info </button>

全球设置

如果您希望对所有的Toast显示进行共同设置，可以在app.module.ts中进行全局设置。

imports: [
    CommonModule,
    BrowserAnimationsModule,
    // Toastr Global Settings
    ToastrModule.forRoot({
      timeOut: 2500,
      positionClass: 'toast-top-right',
      preventDuplicates: false
    })
  ],

最后

其他详细的设置方法，请参考官方网页。

请提供准确的上下文，以便在汉语中进行恰当的转述。

ngx-toastr (a library) is a notification system for Angular applications.