ngx-toastr

每当开发者开发任何类型的 Web 应用程序时，他们都会尝试使用常见的发送通知的场景。我们在浏览 Web 应用程序时，可能会看到一些通知弹出的实例。因此，在本教程中，我们将学习如何显示通知，因为这正是 ngx-toastr 的用途。这是 Angular 中一个有趣的主题，我们在任何 Angular 应用程序中发送 toastr 通知。

创建 Angular 应用程序

在创建任何 Angular 应用程序时，我们只需要从头开始创建，并确保我们的系统中已经安装了 Angular CLI。因此，以下步骤将有助于安装 Angular CLI。

给出的命令会复制 CLI 命令，为我们的 Angular Web 应用创建一个即时样板。接下来，我们需要进入项目目录以开始我们的应用程序。

上面给出的命令将创建我们的 Angular 应用程序，并且我们的 Angular Web 应用将运行在 https://:4200。

在 Angular 中创建组件

从基础开始，我们需要删除 src/app 中所有现有的默认组件文件。当我们导航到安装 Angular 的文件夹时，可以看到此路径。接下来，我们需要确保我们不移动除 app.module.ts 中数据之外的默认组件。

完成此步骤后，我们需要使用 Angular 的 CLI 工具创建一个根组件。以下命令将完成根组件的创建任务。

完成此步骤后，我们需要删除同一文件夹中未删除的 AppComponent 引用，即 app.module.ts，并将 RootComponent 设置为可以被视为引导组件。

现在，导航到 app/root/root.component.html 文件。 我们生成了一个示例代码片段，展示了 HTML 的工作流程。

现在，保存上述代码所做的更改，然后重新启动 Angular 应用程序。我们现在应该能够看到 RootComponent。这可以通过在 Web 浏览器中查看带有按钮渲染的 RootComponent 来实现。

Jscrambler 保护

任何应用程序都需要安全。因此，对于我们的应用程序，我们还需要设置一些安全或技术规则，以便使用 ngx-toastr。 为了方便起见，我们将其命名为 angular alert app。因此，需要将以下命令放入 Angular CLI 中，以便可以添加 Angular ngx-toastr。

一旦我们使用上面的命令安装了上面的包，我们需要打开 <project-directory/angular.json> 文件。完成此步骤后，我们需要包含 toastr 的 CSS。

现在，我们需要 BrowserAnimationsModule 和 ToastrModule。它通常存在于 app.module.ts 中，您需要从那里导入这两个模块。为了演示这一点，我们包含了下面显示的示例代码片段。

为了让开发者使用 ngx-t0astr 模块，我们需要通过将 ToastService 放入其中来包含 Root 组件。

现在，下一步涉及在 RootComponent 中存在的构造函数方法中初始化 ToastrService。

为了演示这一点，请使用以下代码片段，它包含来自 root.component.ts 文件的函数。

现在，应用完上述代码后，我们需要保存更改并重新启动服务器。我们需要在服务器端运行应用程序（https://:4200/）时点击 Show Toastr 按钮。我们现在应该能够看到我们设置的 toast 消息。

Toastr 演示

自定义包装器

许多开发人员有一句重要的俗语：每当我们使用 Web 应用程序中的任何外部模块时，都强烈建议为其包含一个包装器。这是因为通过包含包装器，我们可以确保未来出现需要与第三方模块或外部模块的包含相关的某些替换。因此，最好为应用程序编写包装器，以使我们的应用程序免于损坏或重写。说到这里，让我们看看如何在 Angular 应用程序中使用 ngx-toastr 添加包装器。

因此，我们将创建一个 Angular 服务并将其命名为 notification。稍后将由应用程序用于发送或显示 toastr 消息。因此，我们需要导航到 src/app，在那里创建一个名为 utility 的文件夹。接下来，我们需要导航到 utility 文件夹，并在其中为 Angular 创建一个服务。

生成 ng 服务 notification

通过导入 ngx-toastr 服务并将其放置在 NotificationService 中，我们将首先创建 showSuccess 方法。它通常显示成功的通知 toast。因此，如果我们仔细查看 notification.service.ts 文件，下面的代码片段可能看起来像这样。

完成此步骤后，我们需要将 NotificationService 包装器导入到我们之前创建的 RootComponent 中。现在，它应该调用 showSuccess 方法来处理 toastr 中的消息，并且 root.component.ts 文件应该如下所示。

如果出现需要替换模块并删除 ngx-toastr 模块的情况，我们将首先修改 NotificationService，而应用程序的其余部分则无需任何更改。

Toastr 通知自定义

ngx-toastr 提供了多种选项，可用于自定义我们应用程序的通知。我们可能已经在设备上看到过，可以修改通知的频率。同样，我们可以控制 toast 通知的方式，并随时呈现它们。

此外，我们还可以在 toast 通知消息中添加一些 HTML 内容。这可以通过简单地启用 toast 通知文件中的可用内容并通过 enableHtml 选项启用来实现。

假设我们在 notification.service.ts 文件中添加了一个新方法，以便我们可以渲染 toast 通知中的 HTML。可以在下面的代码片段中看到其演示。

现在，我们需要通过单击按钮来调用上述消息，它将生成 toastr 通知中的 HTML 内容。

控制通知显示时间

ngx-toastr 在通知显示方式方面还提供了另一项功能。我们可以使用名为 timeOut 的选项轻松增加或减少时间，该时间以毫秒为单位计算。

总结

在本教程中，我们学习了如何在任何 Angular 应用程序中集成 ngx-toastr 并显示通知。我们还了解了如何自定义通知，就像我们在大多数基于 Angular 的 Web 应用程序中看到的那样。之后，我们看到了如何修改 toastr 通知模板的时间并根据应用程序需求使用它。Ngx-toastr 不仅限于 Angular 应用程序。它可以轻松地与任何 Web 应用程序集成，该应用程序的用户需要某些通知提醒，因为一次性管理这些通知相当困难。这就是 ngx-toastr 发挥关键作用的地方。

为了更好地理解和深入见解，建议尝试本教程中显示的示例代码。