Angular Material 7-环境设置

Angular Material是一个Angular框架的UI组件库。它可以极大地加速Web应用程序的开发，提高应用程序的质量和用户体验。本文将为您介绍如何在Angular 7项目中设置Angular Material环境。

1. 安装Angular Material

要使用Angular Material，需要先安装它。可以使用npm命令在您的Angular项目中安装Angular Material：

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

注意：@angular/animations和@angular/cdk是Angular Material的依赖项。

2. 设置Angular Material主题

Angular Material使用主题来呈现UI组件。可以在styles.scss文件中为应用程序配置主题。在该文件中，可以定义颜色和样式等元素。以下是一个例子：

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

$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);

$theme: mat-light-theme($primary, $accent);

@include angular-material-theme($theme);

上述例子使用了预定义的indigo-pink主题，并且添加了自己的主体颜色和样式。

3. 导入Angular Material模块

要在应用程序中使用Angular Material组件，必须将它们导入到应用程序中。在app.module.ts文件中，引入需要使用的Angular Material模块，例如MatButtonModule和MatInputModule等。例如：

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

@NgModule({
  imports: [
    MatButtonModule,
    MatInputModule
  ],
  exports: [
    MatButtonModule,
    MatInputModule
  ]
})
export class MaterialModule { }

使用MatButtonModule和MatInputModule的应用程序在导入后就可以使用这些组件了。

4. 总结

以上步骤演示了如何在Angular 7项目中设置Angular Material环境。在您的应用程序中使用Angular Material UI组件可以增加应用程序的外观和用户体验。Happy coding！