第一步：安装material和cdk和animations，一个也不能缺，否则会报错。
npm install --save @angular/material @angular/cdk @angular/animations
第二步：在核心模块引入BrowserAnimationsModule和需要用到的material组件
1 import { NgModule } from ‘@angular/core‘; 2 import { CommonModule } from ‘@angular/common‘; 3 import {MatSidenavModule, MatListModule, MatIconModule, MatButtonModule} from ‘@angular/material‘; 4 import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations‘; 5 6 @NgModule({ 7 imports: [ 8 CommonModule, 9 MatSidenavModule, 10 MatListModule, 11 MatIconModule, 12 MatButtonModule, 13 BrowserAnimationsModule 14 ], 15 exports:[ 16 CommonModule, 17 MatSidenavModule, 18 MatListModule, 19 MatIconModule, 20 MatButtonModule 21 ], 22 declarations: [] 23 }) 24 export class SharedModule { }
如果想要禁止material的动画效果，可以导入NoopAnimationsModule
import {NoopAnimationsModule} from ‘@angular/platform-browser/animations‘;
@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class SharedAppModule { }
第三步：导入material的css样式
可以在项目的根目录文件中的style.scss里面加入以下代码
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
第四步：mat-slide-toggle, mat-slider, matTooltip等这些组件需要hammerjs支持
npm install --save hammerjs
第五步：如果想要用material的icon，需要在根文件index.html加入以下代码
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
原文：https://www.cnblogs.com/hibiscus-ben/p/10168103.html