Angular 是现今最流行的前端框架之一，它提供了许多通知机制，例如 Toast 和 Snackbar，用于提示用户信息，帮助用户了解系统的状态。在本文中，我们将探讨 Angular 的通知功能，了解如何使用 Toast 和 Snackbar 来提高用户体验。
Toast 和 Snackbar 简介
两种通知方式在 Angular 中都是基于 Material Design 的标准，它们具有类似的功能，但有着一些不同之处。Toast 通知是在屏幕的底部弹出的简短的消息框，提示用户有什么事件发生了。然而，Snackbar 通知是在屏幕的顶部弹出的消息框，它允许用户在屏幕的顶部接收到消息，可以包含更多的信息内容。
使用 Toast 和 Snackbar
使用 Angular 的 Toast 和 Snackbar 通知非常简单。要使用 Toast，我们需要导入 MatSnackBarModule 并在我们的组件中添加一个 Toastr 服务，示例如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ------------ --
--------------------- ------- -
---------------------------- ----- -
--------- ----- -- ------
---
-
-现在，在我们的组件 HTML 文件中，我们可以通过调用 openSnackBar() 方法来显示 Toast 消息：
<button mat-button (click)="openSnackBar('Hello world!')">显示 Toast</button>接下来，我们可以使用 Snackbar 消息，它与 Toast 消息大致相同，但我们需要使用不同的服务来使用 Snackbar：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ------------ --
--------------------- ------- -
---------------------------- ----- - -- ------
--------- ----- -- ----
----------------- ------ -- ----
------------------- --------- -- ----
----------- -------------------- -- -----
---
-
-在 openSnackBar() 方法中，我们可以使用 verticalPosition 和 horizontalPosition 来调整 Snackbar 消息框的位置。此外，我们还可以使用 panelClass 添加自定义样式。
我们还可以添加关闭按钮，让用户手动关闭 Snackbar 消息：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ----------- - ---- ------------------------------
------------
--------- -----------
------------ -----------------------
---------- -----------------------
--
------ ----- ------------ -
------------------- ---------- ------------ --
--------------------- ------- -
--- ----------- - ---------------------------- ----- -
--------- ----- -- ----
---
----------------------------------- -- -
----------------------
---
-
-在这个示例中，我们通过获取 Snackbar 引用，然后添加 onAction() 方法来监听 Snackbar 的关闭事件，从而实现手动关闭 Snackbar 的功能。
总结
通过本文，我们可以学会如何在 Angular 中使用 Toast 和 Snackbar 来提高用户体验。Toast 与 Snackbar 非常相似，但功能略有不同，具体取决于我们的需求。我们可以使用很多参数来自定义我们的通知，包括位置、颜色、图标等。这些参数可以通过修改相应的配置选项进行设置。当我们的应用程序需要提示用户时，请记得使用 Angular 的通知服务。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e29aa968c7c53b008f6ad