一、 安装 Angular Material
在 Angualr 项目根目录下执行如下命令：
npm install --save @angular/material
安装完成后有如下提示：
二、安装 Aniamtions
因为一些 Angular Material 组件依赖 Angular animations 模块，所以在使用 Angular Material 时需要安装 @angular/animations 模块，否则在使用 Material 时会报如下错误：
Cannot find module '@angular/animations'.
在 Angualr 项目根目录下执行如下命令：
npm install --save @angular/animations
安装完成后有如下提示：
三、导入 Animations 相关 Module
安装完 @angular/animations 后，需要在根模块中导入相关 Module
1. 导入 BrowserAnimationsModule
如果需要显示相关动画效果，如在真实的应用中，需要在根模块中导入 BrowserAnimationsModule
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
...
imports: [
...
BrowserAnimationsModule
],
...
})
export class AppModule { }
2. 导入 NoopAnimationsModule
如果不想添加其他依赖到项目中，如在动画很慢的平台或用于测试时，可以使用 NoopAnimationsModule ，它只是模仿 animations 模块，实际上并没有动画效果。
import { NoopAnimationsModule } from "@angular/platform-browser/animations";
@NgModule({
...
imports: [
...
NoopAnimationsModule
],
...
})
export class AppModule { }
四、导入 Material Component Module
1. 在根模块中为要使用的每个组件导入 Module
如导入 MdToolbarModule 和 MdIconModule
import {MdToolbarModule, MdIconModule} from '@angular/material';
@NgModule({
...
imports: [
...
MdToolbarModule,
MdIconModule
],
...
})
export class AppModule { }
2. 创建一个单独的 Module ，导入在项目中用到的所有 Angular Material 组件；然后可以将该 Module 导入到要使用 Angular Material 组件的模块
import {MdToolbarModule, MdIconModule} from '@angular/material';
@NgModule({
imports: [MdToolbarModule, MdIconModule],
exports: [MdToolbarModule, MdIconModule],
})
export class CustomMaterialModule { }
在根模块中导入 CustomMaterialModule
import {CustomMaterialModule} from './custom.material.module';
@NgModule({
...
imports: [
...
CustomMaterialModule
],
...
})
export class AppModule { }
3. 导入所有的 Angular Material 组件（不建议）
如果不想一一导入 Material 的单个组件，可以直接在跟模块中导入所有 Material 组件
在根模块中导入 MaterialModule
import { MaterialModule } from "@angular/material";
@NgModule({
...
imports: [
...
MaterialModule.forRoot()
],
...
})
export class AppModule { }
五、引入主题
使用 Material 预置的主题需要在项目中引入主题样式
可用的预置主题有：
- deeppurple-amber.css
- indigo-pink.css
- pink-bluegrey.css
- pink-bluegrey.css
引入预置主题有两种方式：
1. 在 styles.css 中引入
在顶部添加
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
2. 在 index.html 中引入
在 head 标签下添加
<head>
...
<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
</head>
更多主题用法请查看 Angular Material Theming Guide
六、手势支持
一些 Material 组件依赖 HammerJS 手势库，如：md-slide-toggle, md-slider, mdTooltip 等，要使用这些组件的全部功能需要在项目中添加 HammerJS 。
1. 安装 HammerJS
在 Angualr 项目根目录下执行如下命令：
npm install --save hammerjs
安装完成后有如下提示：
2. 导入到项目的根模块
安装完成后，需要将 hammerjs 导入到项目的根模块
...
import 'hammerjs';
...
七、添加 Material Icons
在使用 md-icon 组件时，如果要和官方的 Material Design Icons 一起使用，需要在 index.html 中引入：
<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
在使用 md-icon 组件时可以使用官方的 Material Design Icons，如：
<md-icon>settings</md-icon>
多个单词之间用下划线链接
<md-icon>zoom_in</md-icon>
更多 Material Design Icons 用法请查看 Material Icons Guide
