开始使用Angular 11通知

DebugUsery
98 阅读4分钟

在靠近用户的地方部署容器

本工程教育（EngEd）计划由科支持。

在全球范围内即时部署容器。Section是经济实惠、简单而强大的。

免费入门。

开始使用Angular 11通知

2021年6月3日

在本教程中，我们将讨论这个使用Angular 11的美丽、可定制和响应式弹出通知。我们将深入了解sweetalert，它的功能，以及如何与Angular集成，以取代默认的JavaScript警报通知。

目录

先决条件

要成功学习本教程，你需要熟悉以下内容。

  • 基本的JavaScript - 特别是如何使用警报。
  • 在Angular中安装第三方软件包。
  • 你应该能够熟练使用Node Package Manager（npm）。
  • 在你的本地开发机器上安装Node.js和Angular CLI。

目标

在本Angular SweetAlert教程结束时，你应该能够完成以下工作。

  • 设置Angular环境。
  • 将SweetAlert包添加到你的Angular应用程序。
  • 导入并使用该包来创建弹出信息，如警告、问题和成功。
  • 自定义Sweetalert的默认设置，如调整弹出框的大小。
  • 对弹出框进行动画处理。

设置Angular 11环境

在我们开始使用SweetAlert工具之前，我们首先需要设置我们的Angular项目环境。

在你的终端运行以下命令。

ng g new sweetalert-example

这将需要一些时间，取决于你的网速，完成后，通过运行以下命令移动到项目目录根。

cd sweetalert-example

在Angular 11中安装sweetalert 包

要下载并在你的Angular应用程序中安装sweetAlert包，运行以下命令。

npm install sweetalert2

完成后，将sweetAlert的CSS添加到angular.json 文件中，以显示交互式弹出窗口，如下图所示。

----------------------------
"styles": [
      "src/styles.css",
      "node_modules/sweetalert2/src/sweetalert2.scss"
    ],
---------------------------------------

SweetAlert包也支持Content Delivery Network (CDN) 。这就像在你的应用程序中加入这个链接一样简单，如下图所示。

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="sweetalert2.all.min.js"></script> //use this to initialize the plugin
<script src="sweetalert2.min.js"></script>
<link rel="stylesheet" href="sweetalert2.min.css"> // include stylesheet

在本教程中，我们将使用我们通过npm安装的软件包。

使用SweetAlert创建成功警报

在app.component.ts 文件中，导入 sweetAlertSwal 模块。

import Swal from 'sweetalert2/dist/sweetalert2.js';

这个模块将让我们访问SweetAlertfire() 方法，我们将使用它来触发按钮点击事件。

为了创建一个成功警报，让我们把以下内容添加到我们的app.component.ts 。

-----------------------------------
export class AppComponent implements OnInit {

---------------------
ngOnInit(): void
{
  //call message method and pass it the parameters on page load
  this.showSuccessMessage(
      'SweetAlert Success',
      'Testing My First SweetAlert',
      'success',
      true,
  )
}
/**
   * This method displays a simple success message to the user
   * @param title
   * @param message
   * @param icon
   * @param showCancelButton
   */
  showSuccessMessage(
    title, message, icon = null,
    showCancelButton = true){
    return Swal.fire({
      title: title,
      text: message,
      icon: icon,
      showCancelButton: showCancelButton
    })
 }

输出。

SweetAlertSuccess

在上面的类型脚本中，我们从之前安装的SweetAlert包中导入了Swal 模块。然后我们要调用Swal.fire() 方法，并传递给它一些参数，以显示警报，如上面的截图所示。

使用SweetAlert创建警告警报

这将再次遵循上面定义的相同程序，只有一个修改，如下所示。

-----------------------------------
export class AppComponent implements OnInit {

---------------------
ngOnInit(): void
{
  //call message method and pass it the parameters on page load
  
  this.showWarningMessage(
      'SweetAlert Warning',
      'Testing My First SweetAlert Warning',
      'warning',
      true,
  )
}
/**
   * This method displays a simple warning message to the user
   * @param title
   * @param message
   * @param icon
   * @param showCancelButton
   */
  showWarningMessage(
    title, message, icon = null,
    showCancelButton = true){
    return Swal.fire({
      title: title,
      text: message,
      icon: icon,
      showCancelButton: showCancelButton
    })
 }

输出。

warning-alert

你会注意到，除了信息和图标之外，功能保持不变。

使用SweetAlert创建问题警报

当创建一个带有问号的警报时，我们在图标文本上添加question 。

-----------------------------------
export class AppComponent implements OnInit {

---------------------
ngOnInit(): void
{
  //call message method and pass it the parameters on page load
  this.showQuestionMark(
      'SweetAlert Question mark',
      'Testing My First SweetAlert question ',
      'question',
      true,
  )
}
/**
   * This method displays a simple question message to the user
   * @param title
   * @param message
   * @param icon
   * @param showCancelButton
   */
  showWarningMessage(
    title, message, icon = null,
    showCancelButton = true){
    return Swal.fire({
      title: title,
      text: message,
      icon: icon,
      showCancelButton: showCancelButton
    })
 }

输出。

question-alert

使用SweetAlert创建错误警报

就像其他警报一样，我们只改变图标的描述，如下面的例子所示。

-----------------------------------
export class AppComponent implements OnInit {

---------------------
ngOnInit(): void
{
  //call message method and pass it the parameters on page load
  this.showQuestionMark(
      'SweetAlert Error',
      'Testing My First SweetAlert Error ',
      'error',
      true,
  )
}
/**
   * This method displays a simple question message to the user
   * @param title
   * @param message
   * @param icon
   * @param showCancelButton
   */
  showWarningMessage(
    title, message, icon = null,
    showCancelButton = true){
    return Swal.fire({
      title: title,
      text: message,
      icon: icon,
      showCancelButton: showCancelButton
    })
 }

输出。

error-alert

结论

在本教程中，我们已经看到了如何创建漂亮的、用户互动的警报。我们看到了如何在我们的Angular应用程序中安装SweeAlert包，并将其CSS添加到angular.json 文件中。

我们还讨论了我们如何通过CDN使用SweetAlert，而不一定在我们的应用程序中安装该包。

欲了解更多信息，你可以在这里阅读SweetAlert文档。

编码愉快!

同行评议的贡献者。Odhiambo Paul

avatar
文章
阅读
粉丝