Angular 4：集成Angular Material2

时间：2022-06-01 16:37:19

Angular Material目的是按照Material Design的规范，使用Angular和TypeScript构建一个高质量的UI组件集。

Angular 4已有的项目可以按照下面的步骤集成使用Angular Material2。

安装Angular Material以及Angular CDK

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

@angular/cdk

Component Develop Kit，这是从@angular/material分离出来单独发布到npm的包，它包含了与UI无关的通用内容。

CDK包括的模块：

  • a11y：用于 Accessibility 支持（屏幕阅读器）；
  • observers：提供基于原生的web平台的observer的便捷指令
  • layout：提供用于构建响应式UI的工具集
  • overlay：用于打开屏幕的浮动面板
  • portal：用于简化动态内容（模版或组件）插入过程；
  • bidi：用于文本方向支持（不是所有的语言书写方向都是从左至右）；
  • scrolling：用于响应滚动事件
  • keyboard：常用的键盘按键对应的 keyCode；
  • platform：获取当前的浏览器平台以及特性支持情况；
  • rxjs：提供 rxjs 的链式调用封装，避免在 lib 中引入运算符扩展；
  • table：Material Data-Table 的基础（UI 无关）部分；

安装Angular Animations模块模块

Angular Material有一些组件使用@angular/animations模块的动画效果，所以需要安装@angular/animations模块

npm install --save @angular/animations

使用@angular/animations提供的动画效果需要在模块导入BrowserAnimationsModule模块

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

如果不想使用@angular/animations提供的动画效果，可以导入NoopAnimationsModule模块来屏蔽

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})
export class AppModule { }

导入组件模块

Angular Material把每一个UI组件都封装在一个模块里，有两种方式导入组件模块。

方式一：在使用组件的模块导入相应组件模块

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  ...
  imports: [MatButtonModule, MatCheckboxModule],
  ...
})
export class AppModule { }

方式二：新建Material模块导入应用需要用到的组件模块并导出，在需要用组件的模块只要导入Material模块即可。

import {MatButtonModule, MatCheckboxModule} from '@angular/material';

@NgModule({
  imports: [MatButtonModule, MatCheckboxModule],
  exports: [MatButtonModule, MatCheckboxModule],
})
export class CustomMaterialModule { }

不管是哪种方式，导入组件模块需要在Angular的BrowserModule模块之后。

添加主题

使用Angular Material必须添加一个主题。

使用Angular CLI构建的项目，可以添加到styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

也可以使用link方式添加到index.html。

<link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

内置的主题如下：

  • deeppurple-amber.css
  • indigo-pink.css
  • pink-bluegrey.css
  • purple-green.css

支持手势

mat-slide-toggle, mat-slider, matTooltip等一些组件使用HammerJS提供的手势功能，所以也需要安装hammerjs。

安装hammerjs

npm install --save hammerjs

使用hammerjs

需要应用的入库文件导入hammerjs，如maint.ts

import 'hammerjs';

使用Material Design图标（可选）

如果使用Material Design官方的图标，可以在index.html添加图标链接

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

至此，Angular就集成了Angular Material2。

相关文章