Angular Material入门

大强的博客

于 2018-08-06 14:34:43 发布

阅读量8.2k

点赞数

分类专栏： Angular

Angular 专栏收录该内容

83 篇文章 1 订阅

订阅专栏

有关开始使用新Angular应用程序的帮助，请查看Angular CLI。

对于现有应用，请按照以下步骤开始使用Angular Material。

第1步：安装Angular Material，Angular CDK和Angular Animations
您可以使用npm或yarn命令行工具来安装包。在下面的示例中使用适合您的项目的任何一个。

NPM
npm install --save @angular/material @angular/cdk @angular/animations
纱
yarn add @angular/material @angular/cdk @angular/animations
替代方案：快照构建
还可以使用master的最新更改构建快照。请注意，此快照构建不应被视为稳定，并且可能在版本之间中断。

NPM
npm install --save angular/material2-builds angular/cdk-builds angular/animations-builds
纱
yarn add angular/material2-builds angular/cdk-builds angular/animations-builds
第2步：配置动画
安装动画包后，导入BrowserAnimationsModule到您的应用程序中以启用动画支持。

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

@NgModule({
...
imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }
或者，您可以通过导入禁用动画NoopAnimationsModule。

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

@NgModule({
...
imports: [NoopAnimationsModule],
...
})
export class PizzaPartyAppModule { }
第3步：导入组件模块
为要使用的每个组件导入NgModule：

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

@NgModule({
...
imports: [MatButtonModule, MatCheckboxModule],
...
})
export class PizzaPartyAppModule { }
或者，您可以创建一个单独的NgModule，用于导入将在应用程序中使用的所有Angular Material组件。然后，您可以将此模块包含在您要使用组件的任何位置。

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

@NgModule({
imports: [MatButtonModule, MatCheckboxModule],
exports: [MatButtonModule, MatCheckboxModule],
})
export class MyOwnCustomMaterialModule { }
无论使用哪种方法，一定要导入角材料模块后角的BrowserModule，因为进口秩序事项NgModules。

第4步：包含主题
包含主题是将所有核心和主题样式应用于您的应用程序所必需的。

要开始使用预先构建的主题，请在应用程序中全局包含Angular Material的预构建主题之一。如果您使用的是Angular CLI，可以将其添加到styles.css：

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
如果您没有使用Angular CLI，则可以通过<link>您的元素包含预构建的主题index.html。

有关主题的更多信息以及有关如何创建自定义主题的说明，请参阅主题指南。

第5步：手势支持
一些组件（mat-slide-toggle，mat-slider，matTooltip）依靠HammerJS的手势。为了获得这些组件的完整功能集，必须将HammerJS加载到应用程序中。

您可以通过npm，CDN（例如Google CDN）将HammerJS添加到您的应用程序，或直接从您的应用程序提供。

要通过npm安装，请使用以下命令：

NPM
npm install --save hammerjs
纱
yarn add hammerjs
安装后，将其导入应用程序的入口点（例如src/main.ts）。

import 'hammerjs';
步骤6（可选）：添加材料图标
如果要将mat-icon组件与官方Material Design Icons一起使用，请在您的index.html。中加载图标字体。

请注意，它mat-icon支持任何字体或svg图标; 使用材料图标是众多选项之一。

附录：配置SystemJS
如果你的项目使用模块加载SystemJS，你将需要添加@angular/material和@angular/cdk到SystemJS配置。

该@angular/cdk包由多个入口点组成。这些入口点中的每一个都必须使用SystemJS单独注册。

这里是其中示例性配置@angular/material，@angular/cdk/platform并且@angular/cdk/a11y被使用：

System.config({
// Existing configuration options
map: {
// ...
'@angular/material': 'npm:@angular/material/bundles/material.umd.js',

// CDK individual packages
'@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
'@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
// ...
'hammerjs': 'npm:hammerjs',
},
packages: {
//...
hammerjs: {main: './hammer.min.js', defaultExtension: 'js'}
//...
}
});
Angular Material项目示例
material.angular.io - 我们使用Angular Material构建自己的文档！