angular项目中使用angular-material2

最新推荐文章于 2025-06-02 09:05:09 发布

weixin_30799995

最新推荐文章于 2025-06-02 09:05:09 发布

阅读量162

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/kaid/p/7531800.html

本文档详细介绍了如何使用 Angular Material 提升 Web 应用的 UI 设计，包括安装 Angular Material 和 Angular CDK，配置动画模块，引入所需组件模块，添加主题样式，支持手势操作以及加载 Material 图标等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Step 1: Install Angular Material and Angular CDK

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

npm install --save angular/material2-builds angular/cdk-builds

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { }

If you don't want to add another dependency to your project, you can use the NoopAnimationsModule.

import {NoopAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [NoopAnimationsModule], ... }) export class PizzaPartyAppModule { }

Step 3: Import the component modules

Import the NgModule for each component you want to use:

import {MdButtonModule, MdCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MdButtonModule, MdCheckboxModule], ... }) export class PizzaPartyAppModule { }

Alternatively, you can create a separate NgModule that imports all of the Angular Material components that you will use in your application. You can then include this module wherever you'd like to use the components.

import {MdButtonModule, MdCheckboxModule} from '@angular/material'; @NgModule({ imports: [MdButtonModule, MdCheckboxModule], exports: [MdButtonModule, MdCheckboxModule], }) export class MyOwnCustomMaterialModule { }

Whichever approach you use, be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules.

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include one of Angular Material's prebuilt themes globally in your application. If you're using the Angular CLI, you can add this to your styles.css:

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

If you are not using the Angular CLI, you can include a prebuilt theme via a <link> element in your index.html.

For more information on theming and instructions on how to create a custom theme, see the theming guide.

Step 5: Gesture Support

Some components (md-slide-toggle, md-slider, mdTooltip) rely on HammerJS for gestures. In order to get the full feature-set of these components, HammerJS must be loaded into the application.

You can add HammerJS to your application via npm, a CDN (such as the Google CDN), or served directly from your app.

To install via npm, use the following command:

npm install --save hammerjs

After installing, import it on your app's entry point (e.g. src/main.ts).

import 'hammerjs';

Step 6 (Optional): Add Material Icons

If you want to use the md-icon component with the official Material Design Icons, load the icon font in your index.html.

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

For more information on using Material Icons, check out the Material Icons Guide.

Note that md-icon supports any font or svg icons; using Material Icons is one of many options.

Appendix: Configuring SystemJS

If your project is using SystemJS for module loading, you will need to add @angular/material and @angular/cdk to the SystemJS configuration.

The @angular/cdk package is organized of multiple entry-points. Each of these entry-points must be registered individually with SystemJS.

Here is a example configuration where @angular/material, @angular/cdk/platform and @angular/cdk/a11y are used:

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', // ... } });