在Angular项目中完成 Material组件库的初始化配置

最新推荐文章于 2022-10-18 21:20:29 发布

Zero L

最新推荐文章于 2022-10-18 21:20:29 发布

阅读量1.0k

点赞数

分类专栏： angular 文章标签： angular Material

本文链接：https://blog.youkuaiyun.com/sinat_38930182/article/details/89338943

版权

angular 专栏收录该内容

12 篇文章

订阅专栏

官方中文网站在此：https://material.angular.cn/

执行以下命令，在Angular项目中完成 Material 的初始化配置。
（步骤与官方的 “快速上手” 大同小异，可以直接看https://material.angular.cn/guide/getting-started ，本文的目的只是节约时间，按照以下步骤很快就可以初始化配置完成~）

第一步：安装 Angular Material、Angular CDK 和 Angular 动画库

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

如果项目的package.json中已存在
在这里插入图片描述
直接npm install --save @angular/material @angular/cdk就好了~

第二步：创建相关的 NgModule

创建一个单独的 NgModule 来导入应用中要用到的所有 Angular Material 组件。然后只要在其它用到这些组件的模块中导入这个模块即可。

ng g module common-uilib

其中common-uilib.module.ts添加（随你）：

import { NgModule } from '@angular/core';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';

@NgModule({
  imports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule],
  exports: [
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatStepperModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule],
})
export class CommonUilibModule { }

第三步：添加主题

要使用一个预构建的主题，只要在应用中全局包含一个 Angular Material 的预构建主题就可以了。把下列代码添加到style.css 中：

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

第四步：手势支持

npm install --save hammerjs

在main.ts中添加

 import 'hammerjs';

第五步：在 index.html 中添加 Material 图标集

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

这样就配置好了~接下来在你的项目中使用它吧 ~