在 Angular 中使用 Angular Material

Angular Material 是一个 UI 组件库，其提供了一组美观、高效的 UI 组件，包括按钮、卡片、表单控件等等，让我们可以更加方便地构建漂亮的 Web 应用程序。本文将介绍如何在 Angular 中使用 Angular Material。

安装

使用 Angular CLI，我们可以通过一个简单的命令来安装 Angular Material：

ng add @angular/material

这个命令会将 Angular Material、它需要的 Angular CDK、以及 Angular 官方图标库都自动添加到项目中。此外，它还将为我们设置默认主题，并将所需的 CSS 样式表导入项目中。

导入模块

在使用 Angular Material 之前，需要先导入相应的模块。我们可以在 app.module.ts 文件中，将 MatToolbarModule、MatIconModule、MatButtonModule、MatCardModule 和 MatInputModule 等模块引入到项目中。

import { NgModule } from '@angular/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatInputModule } from '@angular/material/input';

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

然后在 app.module.ts 中引入此 MaterialModule。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from './material.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, MaterialModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

使用组件

在模板中使用 Angular Material 的组件非常简单。例如，要使用 MatToolbar，我们可以在模板中添加以下代码：

<mat-toolbar>
  <mat-toolbar-row>
    <span>My App</span>
    <span class="spacer"></span>
    <button mat-button>Home</button>
    <button mat-button>About</button>
  </mat-toolbar-row>
</mat-toolbar>

它将创建一个顶部工具栏，其中包含 My App 文字，并且有两个按钮：Home 和 About。此外，我们还可以使用 <mat-card>、<mat-form-field>、<mat-select>、<mat-table> 等等来使用其他组件。

自定义主题

Angular Material 默认提供了两个主题：浅色主题和深色主题。我们可以通过在 styles.scss 或 styles.css 中覆盖他们来定义自己的主题。

@import '~@angular/material/theming';

$my-app-primary: mat-palette($mat-blue, 600);
$my-app-accent: mat-palette($mat-pink, 700, 800, 200);
$my-app-theme: mat-light-theme($my-app-primary, $my-app-accent);

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

此外，我们还可以通过设置不同的 mat-palette 和 mat-color 来自定义自己的主题。

总结

Angular Material 是一个方便易用、外观美观的 UI 组件库。我们可以使用它来构建漂亮的 Web 应用程序，而无需耗费太多时间和精力。本文简要介绍了如何安装 Angular Material、导入相应的模块、使用组件以及自定义主题。