Angular Material 7 – 环境设置

Angular Material是一个UI组件库，它为我们提供了丰富、美观、易用的界面组件和动画效果，可以在Angular项目中快速搭建漂亮的用户界面。本文将介绍如何在Angular项目中引入Angular Material，并搭建相应的环境。

安装Angular Material

引入Angular Material需要先安装相应的包。我们可以使用npm来安装，方法如下：

# 使用npm安装Angular Material
npm install --save @angular/material @angular/cdk @angular/animations

安装完成后，我们需要在项目模块中导入对应的模块：

// app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { BrowserModule } from '@angular/platform-browser';
import {MatButtonModule} from '@angular/material/button';
import {MatCardModule} from '@angular/material/card';
import {MatIconModule} from '@angular/material/icon';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    HttpClientModule,
    MatButtonModule,
    MatCardModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

在上述代码中，我们引入了常用的几个组件模块，如mat-button、mat-card、mat-icon等等。

搭建Angular Material主题

默认情况下，Angular Material的组件是使用它自己的主题来渲染的。我们可以根据自己的需求来搭建自己的主题。搭建主题需要使用Angular Material的样式处理工具SCSS。

在项目根目录下建立一个scss文件夹，文件夹中的styles.scss文件是用来设置主题的。我们可以修改颜色、字体等相关样式属性来定制自己的主题。示例代码如下：

// src/scss/styles.scss

// 引入默认主题
@import '~@angular/material/theming';

// 定义自己的主题
 $primary: mat-palette($ mat-indigo);
 $accent: mat-palette($ mat-pink, A200, A100, A400);
 $warn: mat-palette($ mat-red);
 $dark-theme: mat-dark-theme($ primary,  $accent,$ warn);

// 应用主题到根元素上
@include mat-core();
@include angular-material-theme($dark-theme);

// 重置自己定义的样式
body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

通过以上代码，我们定义了一个名为$dark-theme的主题，并将它应用到根元素上。

为了让Angular应用加载这个scss文件，我们需要在angular.json文件中添加以下配置：

// angular.json

{
  "projects": {
    "project-name": {
      "architect": {
        "build": {
          "options": {
            "styles": [
              "src/scss/styles.scss"
            ]
          }
        }
      }
    }
  }
}

每次修改主题会使得构建时间增长，我们可以使用以下命令把样式抽离成单独的文件，以减小构建时间：

ng build --extract-css

顺利构建出打包文件后就可以看到运用自己的主题了。

部署Material字体图标

前面在模块文件中已经导入了MatIconModule，但这只是导入了UI组件库的图标封装形式，还需要把字体图标也应用到项目中。

可以在src/index.html的head标签内引用Material字体图标：

<!-- src/index.html -->
<head>
  ...
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  ...
  <title>AngularMaterial7 </title>
  <base href="/">
  ...
</head>

完整的代码解释如下：

Font：国外一流google的字体库fonts.googleapis.com
Font-family：加载谷歌的Roboto字体
Material+Icons：加载Material UI库的图标字体

在组件中使用

组件中使用Material UI库的组件很简单。下面我们来实现一个简单的登录表单：

<!-- app.component.html -->
<div class="form">
  <mat-card>
    <mat-card-header>
      <mat-card-title>登录</mat-card-title>
    </mat-card-header>

    <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
      <mat-form-field appearance="outline">
        <input matInput type="email" name="email" placeholder="Email" [(ngModel)]="user.email" required>
      </mat-form-field>

      <mat-form-field appearance="outline">
        <input matInput type="password" name="password" placeholder="Password" [(ngModel)]="user.password" required>
      </mat-form-field>

      <button mat-raised-button color="primary" type="submit">登录</button>
    </form>
  </mat-card>
</div>

其中，mat-card是Angular Material中的一个卡片组件。mat-card-header、mat-card-title、mat-form-field等都是Angular Material中的UI组件。