新手合并 Angular 7 + Material 2

Angular 7 + Material 2

Overview

题目的新手指的是自己，整理了一下Angular material官网和CSDN上的整合方法，写一下，第一次写，纯粹的装P心切促使我写。
既然要整合这两个东西，那就说明其他的环境你都弄好了，那就直接进入正题。

一.安装依赖：material + hammerjs

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

这一步需要安装两个，第二个可选，不过安一下比较有档次。
注意：针对hammerjs，需要手动的添加进入angular.json文件中的scripts中：

"scripts": [
              "node_modules/hammerjs/hammer.min.js"
            ]

二. 创建material.module

为什么要创建这个东西呢？刚开始我看了好多文章写的都是要创建这个，但是我固有的思维就是：安装依赖->导入直接就用了，可是为什么多这一步？其实有一个MaterialModule可以按我的固有思维直接导入，但是不稳定。所以很多人(官方也推荐)大家习惯用什么样式动画，就导入什么，可是太多了…所以创建一个这个模块，把所有的都放在这个模块中，再把它放到根模块中导入就能用了(这个下一步再说)。

1.首先创建material module：

$ ng g module material

2.把所有(其实是大部分)的小模块都导入:

//material.module.ts文件
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule { }

3.把material.module导入根模块；同时导入动画特效模块Animations

//app.module.ts文件
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TestComponent } from './test/test.component';

@NgModule({
...
  imports: [
  ...
    MaterialModule,
    BrowserAnimationsModule
  ...
  ]
  ...
})

三. 添加图标和主题颜色

1.导入主题，可以将以下内容添加到全局styles.css文件中：

//styless.css文件
@import '~@angular/material/prebuilt-themes/indigo-pink.css';

2.导入图标(这步可有可无，毕竟导入的是Google的图标，国内访问怕是…）
放入index.html文件即可：

//index.html文件
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

四. 用吧！

然后就可以使用了，并且所有的component都可以用，但是单独从组件中引入material无法使用。不知道为啥，可能是组件中没有Ngmodel的原因。

使用案例：

//app.component.html文件
<h3>Raised Buttons</h3>
<div class="example-button-row">
  <button mat-raised-button>Basic</button>
  <button mat-raised-button color="primary">Primary</button>
  <button mat-raised-button color="accent">Accent</button>
  <button mat-raised-button color="warn">Warn</button>
  <button mat-raised-button disabled>Disabled</button>
</div>

效果：

Reference

https://alligator.io/angular/angular-material-2/