Angular Material 7 – 概述

Angular Material 是一款基于 Angular 框架开发的 UI 组件库。它提供了一系列常用的 UI 组件，如导航栏、菜单、表格、输入框等，可以帮助开发者快速构建具有规范、美观的 Web 应用。

安装

使用 npm 安装 Angular Material：

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

在 Angular 项目中使用 Angular Material，需要在app.module.ts文件中引入相应模块，并添加到 imports 数组中：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatButtonModule, MatCheckboxModule } from '@angular/material';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    MatButtonModule,
    MatCheckboxModule,
    ...
  ],
  ...
})
export class AppModule { }

常用组件

Button

Button 组件用于展示可点击的按钮，常用于触发事件、提交表单等操作。在 Angular Material 中，可以使用 mat-button 样式类来应用 Button 组件，如下所示：

<button mat-button>Click me!</button>

Input

Input 组件用于接收用户输入的值，常用于表单中。在 Angular Material 中，可以使用 mat-input 样式类来应用 Input 组件，如下所示：

<mat-form-field>
  <input matInput placeholder="Username">
</mat-form-field>

Checkbox

Checkbox 组件用于展示或选择一个或多个选项。在 Angular Material 中，可以使用 mat-checkbox 样式类来应用 Checkbox 组件，如下所示：

<mat-checkbox>Remember me</mat-checkbox>

Table

Table 组件用于展示数据，常用于展示列表、排行榜等。在 Angular Material 中，可以使用 mat-table 样式类来应用 Table 组件，如下所示：

<table mat-table [dataSource]="dataSource">

  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef>Position</th>
    <td mat-cell *matCellDef="let element">{{element.position}}</td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef>Name</th>
    <td mat-cell *matCellDef="let element">{{element.name}}</td>
  </ng-container>

  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef>Weight</th>
    <td mat-cell *matCellDef="let element">{{element.weight}}</td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

</table>

Dialog

Dialog 组件用于展示弹出框。在 Angular Material 中，可以使用 mat-dialog 样式类来应用 Dialog 组件，如下所示：

import { MatDialog } from '@angular/material';

@Component({
  selector: 'app-dialog-example',
  template: `
    <h1 mat-dialog-title>Dialog</h1>
    <div mat-dialog-content>
      This is a dialog!
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onClick()">Close</button>
    </div>
  `,
})
export class DialogExampleComponent {

  constructor(public dialog: MatDialog) {}

  onClick(): void {
    this.dialog.closeAll();
  }

}