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>