angular 引入material-ui

第一步：安裝material和cdk和animations，一個也不能缺，否則會報錯。

npm install --save @angular/material @angular/cdk @angular/animations

第二步：在核心模塊引入BrowserAnimationsModule和需要用到的material組件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {MatSidenavModule, MatListModule, MatIconModule, MatButtonModule} from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    CommonModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    MatButtonModule,
    BrowserAnimationsModule
  ],
  exports:[
    CommonModule,
    MatSidenavModule,
    MatListModule,
    MatIconModule,
    MatButtonModule
  ],
  declarations: []
})
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">