Angular Material 之 Get Started

时间 2019-11-15

标签 angular material started 栏目 AngularJS 繁體版

原文原文链接

1、安装 Angular Material

在 Angualr 项目根目录下执行以下命令：javascript

npm install --save @angular/material复制代码

安装完成后有以下提示：
css

2、安装 Aniamtions

由于一些 Angular Material 组件依赖 Angular animations 模块，因此在使用 Angular Material 时须要安装 @angular/animations 模块，不然在使用 Material 时会报以下错误：html

Cannot find module '@angular/animations'.复制代码

在 Angualr 项目根目录下执行以下命令：java

npm install --save @angular/animations复制代码

安装完成后有以下提示：
node

3、导入 Animations 相关 Module

安装完 @angular/animations 后，须要在根模块中导入相关 Modulegit

1. 导入 BrowserAnimationsModule

若是须要显示相关动画效果，如在真实的应用中，须要在根模块中导入 BrowserAnimationsModulegithub

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

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

2. 导入 NoopAnimationsModule

若是不想添加其余依赖到项目中，如在动画很慢的平台或用于测试时，可使用 NoopAnimationsModule ，它只是模仿 animations 模块，实际上并无动画效果。npm

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

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

4、导入 Material Component Module

1. 在根模块中为要使用的每一个组件导入 Module

如导入 MdToolbarModule 和 MdIconModuleapi

import {MdToolbarModule, MdIconModule} from '@angular/material';

@NgModule({
  ...
  imports: [
      ...
      MdToolbarModule,
      MdIconModule
  ],
  ...
})
export class AppModule { }复制代码

2. 建立一个单独的 Module ，导入在项目中用到的全部 Angular Material 组件；而后能够将该 Module 导入到要使用 Angular Material 组件的模块

import {MdToolbarModule, MdIconModule} from '@angular/material';

@NgModule({
  imports: [MdToolbarModule, MdIconModule],
  exports: [MdToolbarModule, MdIconModule],
})
export class CustomMaterialModule { }复制代码

在根模块中导入 CustomMaterialModuleide

import {CustomMaterialModule} from './custom.material.module';

@NgModule({
  ...
  imports: [
      ...
      CustomMaterialModule
  ],
  ...
})
export class AppModule { }复制代码

3. 导入全部的 Angular Material 组件（不建议）

若是不想一一导入 Material 的单个组件，能够直接在跟模块中导入全部 Material 组件

在根模块中导入 MaterialModule

import { MaterialModule } from "@angular/material";

@NgModule({
  ...
  imports: [
    ...
    MaterialModule.forRoot()
  ],
  ...
})
export class AppModule { }复制代码

5、引入主题

使用 Material 预置的主题须要在项目中引入主题样式

可用的预置主题有：

deeppurple-amber.css
indigo-pink.css
pink-bluegrey.css
pink-bluegrey.css

引入预置主题有两种方式：

1. 在 styles.css 中引入

在顶部添加

@import '~@angular/material/prebuilt-themes/indigo-pink.css';复制代码

2. 在 index.html 中引入

在 head 标签下添加

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

更多主题用法请查看 Angular Material Theming Guide

6、手势支持

一些 Material 组件依赖 HammerJS 手势库，如：md-slide-toggle, md-slider, mdTooltip 等，要使用这些组件的所有功能须要在项目中添加 HammerJS 。

1. 安装 HammerJS

在 Angualr 项目根目录下执行以下命令：

npm install --save hammerjs复制代码

安装完成后有以下提示：

2. 导入到项目的根模块

安装完成后，须要将 hammerjs 导入到项目的根模块

...
import 'hammerjs';
...复制代码

7、添加 Material Icons

在使用 md-icon 组件时，若是要和官方的 Material Design Icons 一块儿使用，须要在 index.html 中引入：

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

在使用 md-icon 组件时可使用官方的 Material Design Icons，如：

<md-icon>settings</md-icon>复制代码

多个单词之间用下划线连接

<md-icon>zoom_in</md-icon>复制代码

更多 Material Design Icons 用法请查看 Material Icons Guide