Angular Material入门

莫誉
2023-12-01

有关开始使用新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。中加载图标字体。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
有关使用“材质图标”的更多信息,请查看“ 材质图标指南”。

请注意,它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构建自己的文档!

 类似资料: