Angular Material 安装

Angular Material 提供可在移动设备、Web 和桌面设备上运行的 UI 组件。 Angular Material 用于通过重用常用组件（例如卡片、输入、数据表等）来开发流程。

我们需要以下内容来安装 Angular

• Node.js
• npm
• Angular CLI
• 用于编写代码的 IDE

Node.js 应该大于 8.11，并且 npm 应该大于 5.6。

Node.js

在终端中键入 node -v 以检查 Node.js 是否已安装在您的系统上。它将帮助您查看系统中已安装的 Node.js 的版本。

如果该命令没有显示任何结果，则表示您尚未正确安装 Node.js。

要安装 Node.js，请访问链接 https://node.org.cn/en/download/ 并下载适合您操作系统的版本。

根据您的操作系统安装该软件包。安装 nodejs 时，npm 也会随之安装。在终端中键入 npm -v 以检查 npm 是否已安装在我们的系统中。它将显示 npm 的版本。

借助 Angular CLI，Angular 的安装非常简单。访问 https://cli.angular.io/ 以获取命令的参考。

键入 npm install -g @angular/cli 以在您的系统上安装 Angular CLI。

Angular CLI 提供如上所示的界面。我们也可以使用 IDE，例如 WebStorm、Atom、Visual Studio Code 等。

安装 Angular Material

步骤 1：安装 Angular CLI

使用 npm 安装 Angular CLI

步骤 2：为 Angular 项目创建一个工作区

创建一个工作区

步骤 3：安装 Angular Material、Angular CDK 和 Angular Animations

add 命令将通过使用 Angular CLI 进行更新，执行配置更改并执行初始化代码。

步骤 4：配置动画

步骤 5：导入 Angular Material 组件模块

导入应用程序所需的组件模块。

示例

示例

Checkbox

Radio Button

输入

Button (按钮)

卡片

输出

步骤 6：手势支持

组件 (mat-slider, matTooltip, mat-slide-toggle) 依赖于 HammerJS 来使用手势。

安装 HammerJS，然后在 'main.ts' 文件中导入它。