Angular Material 是由 Angular 官方支持的 Material Design 风格的组件库，它提供了一套可重用的 UI 组件，可以轻松地为 Angular 应用程序添加美观且易于使用的 UI。在本文中，我们将介绍如何在 Angular 应用程序中使用 Angular Material 组件，包括如何安装、导入和使用这些组件。
安装 Angular Material
安装 Angular Material 非常简单，首先需要使用 npm 安装 Angular Material，打开终端并运行以下命令：
--- ------- ------ ----------------- ------------ -------------------
上面的命令将安装 Angular Material、Angular CDK 和 Angular 动画，这些都是必需的依赖项。
导入 Angular Material 模块
一旦你安装了 Angular Material，你就可以将它们导入到你的应用程序中，以便在组件中使用它们。要使用 Angular Material 的组件，你需要导入所需的模块，例如，如果你想使用一个按钮组件，则需要导入 MatButtonModule 模块。以下是导入所需模块的示例：
------ - -------- - ---- ----------------
------ - --------------- - ---- ---------------------------
------ - -------------- - ---- --------------------------
------ - ------------- - ---- -------------------------
-----------
-------- -
----------------
---------------
-------------
--
-------- -
----------------
---------------
-------------
-
--
------ ----- -------------- - -在上面的示例中，我们导入了 MatButtonModule、MatInputModule 和 MatCardModule 模块，并将它们加入了 imports 数组中。我们还将这些模块添加到 exports 数组中，以便我们可以在其他组件中使用它们。
使用 Angular Material 组件
在导入了所需的模块后，我们就可以在组件中使用 Angular Material 组件了。例如，以下是如何在组件中使用一个按钮组件的示例：
------- ---------------- ------------
在上面的示例中，我们使用 mat-button 指令创建了一个按钮组件，并在按钮文本中添加了一些文本 “Click me!”。
除了按钮之外，Angular Material 还提供了许多其他组件，例如输入框 (mat-input)、卡片 (mat-card)、对话框 (mat-dialog) 等等。可以在 Angular Material 官方网站上查看完整的组件列表。
示例代码
以下是一个简单的组件，它使用 Angular Material 的按钮组件和输入框组件：
------ - --------- - ---- ----------------
------------
--------- ---------------------
--------- -
-----
----------
-----------------
----------------------- -------- ---------------------------
------------------
------------------
----------------
------ -------- ------------------ ---- ------
-----------------
------- ----------------- ------------------- --------------
-------------------
-----------
------
-
--
------ ----- ---------------------- - -在上面的示例中，我们使用 mat-card、mat-card-header、mat-card-title、mat-form-field、mat-input 和 mat-raised-button 组件创建了一个带有输入框和按钮的卡片组件。
结论
Angular Material 是一个非常有用的组件库，它提供了一套美观且易于使用的 UI 组件，可以加速我们开发 Angular 应用程序的过程。在本文中，我们讨论了如何安装、导入和使用 Angular Material 组件，并提供了示例代码供参考。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672d9ff8eedcc8a97c8577ce