在开发 Web 应用程序时，向用户提供反馈是非常重要的。消息提示框是一种常见的方式来告知用户操作的结果，让用户获得实时反馈。在 Angular 中，我们可以使用 Toast 消息提示框来实现这一目的。
安装依赖
首先，我们需要安装依赖库。在 Angular 中，我们可以使用 @angular/material 库来实现消息提示框。
运行以下命令来安装库：
--- ------- ----------------- ------------ ------------------- ------
这将安装 @angular/material、@angular/cdk 和 @angular/animations 三个库。
导入模块
安装完依赖库之后，我们需要在 Angular 中导入 MatSnackBarModule，这是 Angular Material 中的一个模块，用于实现消息提示框。
在 app.module.ts 文件中导入 MatSnackBarModule：
------ ------------------- ---- ------------------------------ ----------- --- -------- -------------------- --- -- ------ ----- --------- - -
创建消息提示框
接下来，我们需要在组件中创建消息提示框。在组件中导入 MatSnackBar 并在构造函数中初始化它：
------ ------------- ---- ------------------------------ ------------ --- -- ------ ----- ---------------- - ------------------- ---------- ------------ -- -
接下来，我们需要创建一个方法来弹出消息提示框。在方法中，我们可以使用 MatSnackBar 的 open 方法来打开 Toast 消息提示框。具体来说，它需要以下参数：
- 消息：要显示的消息
- 动作：可选的操作，可以是一个按钮或一个链接。
- 可选配置：用于配置消息框颜色、位置等。
这是一个示例代码：
-------------- -
--------------------------- -------- -------- -
--------- -----
---
-在上面的代码中，我们传递了一个字符串 "Hello, world!" 作为消息。我们还传递了一个字符串 "Close" 作为关闭按钮的标签。最后，我们传递了一个可选配置，它将消息框的持续时间设置为 2000 毫秒。
在组件中使用
现在，我们已经成功创建了一个 Toast 消息提示框。在需要的地方，我们可以调用 openSnackBar 方法来打开消息提示框。
例如，在以下示例中，我们创建了一个按钮，点击按钮时将打开消息提示框：
------- ----------------- --------------------------------------
结论
使用 Toast 消息提示框是一种非常好的方式来向用户提供实时反馈。在 Angular 中，我们使用 @angular/material 库来实现消息提示框。使用 MatSnackBar 和 open 方法，我们可以轻松地创建和显示字符串消息。总之，Toast 消息提示框在以下场景中非常有用：
- 提示用户任务的成功或失败。
- 通知用户异步操作正在进行中。
- 提供必要的确认，以执行关键任务。
希望这篇文章能够帮助你在 Angular 中使用 Toast 消息提示框。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6719ea729b4aadf9e006ea69