前言
Angular 是目前非常流行的一种前端框架，它能帮助前端开发者快速构建复杂单页应用程序。而 Material Design，是一种被 Google 推荐使用的 UI 设计规范，因为它能够为用户带来更加美观、干净的体验。本文将介绍在 Angular 项目中如何使用 Material Design 快速实现 UI 设计。
安装 Angular Material
Angular Material 是 Angular 官方提供的帮助开发者快速构建基于 Material Design 的 UI 界面的库。在开始使用它之前，需要首先安装它。可以通过 npm 来安装：
npm install --save @angular/material @angular/cdk @angular/animations
注意，需要安装 Angular CDK 和 Angular Animations 两个依赖包。
导入 Angular Material
在你的 Angular 项目中，需要在 app.module.ts 文件中导入 Angular Material 的模块，例如：
-- -------------------- ---- ------- ------ - ----------------------- - ---- --------------------------------------- ------ - -------- - ---- ---------------- ------ - --------------- - ---- --------------------------- ------ - ----------------- - ---- ----------------------------- ----------- -------- - ------------------------ ---------------- ----------------- -- -------- - ---------------- ----------------- - -- ------ ----- -------------- - -展开代码
注意上面的 MaterialModule 用来导入所需要的 Material Design 控件，它将在你的应用中作为依赖被注入到其它模块中去。
使用 Angular Material 控件
在你的组件中，需要导入需要使用的控件，并将它们加入到 HTML 中去。例如：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ----------------- - ---- ----------------------------- ------------ --------- ----------- --------- - ------------------- ------------------ -- ---------- ------------------------ -- ------ ----- ------------ - ----- - ------ -展开代码
通过上面的代码，我们就成功地在 HTML 中加入了一个单选框（checkbox）控件。
样式
Material Design 有它独特的设计风格，因此生成好的控件并不一定能够符合你想要的 UI 风格。为了满足你的需求，你可能需要使用自定义的样式来改变控件的颜色、边框、字体大小等等。在这个方面，Angular Material 提供了不同的方式来帮助你完成这些工作，其中最常见的方式就是使用 MatTableDataSource。例如，下面演示了如何使用 MatTableDataSource 来改变 Angular Material 表的 UI 风格。
首先，需要在 app.module.ts 文件中导入 MatTableModule 和 CdkTableModule：
-- -------------------- ---- ------- ------ - -------------- - ---- -------------------- ------ - -------------- - ---- --------------------- ----------- ------------- - ------------ -- -------- - -------------- ------------------------ --------------- -------------- -- ---------- --- ---------- -------------- -- ------ ----- --------- - -展开代码
接下来，在你的 Angular 组件文件中使用以下代码：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------ - ------------------ - ---- -------------------- ------ --------- --------------- - ----- ------- --------- ------- ------- ------- ------- ------- - ----- ------------- ----------------- - - ---------- -- ----- ----------- ------- ------- ------- ----- ---------- -- ----- --------- ------- ------- ------- ------ ---------- -- ----- ---------- ------- ------ ------- ------ ---------- -- ----- ------------ ------- ------- ------- ------ ---------- -- ----- -------- ------- ------ ------- ----- ---------- -- ----- --------- ------- ------- ------- ----- ---------- -- ----- ----------- ------- ------- ------- ----- ---------- -- ----- --------- ------- ------- ------- ----- ---------- -- ----- ----------- ------- ------- ------- ----- ---------- --- ----- ------- ------- ------ ------- ------ -- ------------ --------- ----------- --------- - ------ --------- -------------------------- ------------- ------------------------ --- --------------- ------------------ --- ----- --- -------- ---------------- --------- -------------------- ----- --------------- ------------- -------------------- --- --------------- ------------------ ---- ----- --- -------- ---------------- --------- ---------------- ----- --------------- ------------- ---------------------- --- --------------- ------------------ ------ ----- --- -------- ---------------- --------- ------------------ ----- --------------- ------------- ---------------------- --- --------------- ------------------ ------ ----- --- -------- ---------------- --------- ------------------ ----- --------------- --- -------------- ----------------------------------------- --- ------- --------------- ---- -------- ------------------ ------------------------ ---------------------------------- ------------------------------------- -------- -- ------- -- -------------- - ------ ----- ------- - ----- ---------- ----- - --------------- - ----------------- -------- ------ ------ - -------------------- - ----------------- ------- - --- -- ------ ----- ------------ - ----------------- -------- - ------------ ------- --------- ---------- ---------- - --- --------------------------------- --------------- - --- -------------- - ------------------------------- - -展开代码
在上面的代码中，通过 dataSource 属性指定了数据源。控件将在内部被 Angular 自动更新，因此不需要额外处理。同时，样式信息也被包含在 Component 中的 style 节点中，例如 example-highlighted 类负责高亮文本。
总结
Material Design 控件能够快速帮助前端开发者快速构建 UI 设计，而使用 Angular Material 库则能够轻松地在 Angular 项目中实现这些 UI 控件。本文介绍了如何在 Angular 项目中快速安装和使用 Angular Material 控件，同时也展示了如何通过样式来进一步改变控件的外观和表现形式。希望本文内容能够帮助大家更好地了解 Material Design 和 Angular Material 的使用方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65859db5d2f5e1655d0371b3
