Angular8教程

Angular8 Material

Angular Material 提供了大量高质量和现成的基于材料设计的Angular组件。让我们学习如何在 Angular 应用程序中包含 Angular Material并使用其组件。

配置Angular Material

让我们看看如何在 Angular 应用程序中配置 Angular Material。
打开命令提示符并转到项目根文件夹。
cd /go/to/expense-manager
使用以下命令添加 Angular Material包-
ng add @angular/material
Angular CLI 会询问有关主题、手势识别和浏览器动画的某些问题。选择您选择的任何主题,然后积极回答手势识别和浏览器动画。
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://material.angular.i
o?theme=indigo-pink ]
Set up HammerJS for gesture recognition? Yes
Set up browser animations for Angular Material? Yes
Angular Material将每个 UI 组件封装在一个单独的模块中。通过根模块 (src/app/app.module.ts)
将所有需要的模块导入到应用程序中
import { MatTableModule } from '@angular/material/table';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
@NgModule({
  imports: [
    MatTableModule,
    MatButtonModule,
    MatIconModule
  ]
})
使用 ExpenseEntryListComponent 模板 (src/app/expense-entry-list/expense-entry-list.component.html) 更改编辑按钮,如下所示-
<div class="col-sm" style="text-align: right;">
    <!--<button type="button" class="btn btn-primary">Edit</button>-->
    <button mat-raised-button color="primary">Edit</button> 
</div>
运行应用程序并测试页面。
ng serve
应用程序的输出如下-
配置Angular
此处,应用程序清楚地显示了 Angular Material 按钮。

工作示例

Angular Material 包提供的一些重要的 UI 元素。
Form field Input Checkbox Radio button Select Button DatePicker List Card Grid list Table Paginator Tabs Toolbar Menu Dialog Snackbar Progress bar Icon Divider
材料组件的使用非常简单,我们将通过一个示例项目来学习常用的材料组件之一, 材料表
打开命令提示符并转到项目根文件夹。
ng add @angular/material
让我们更改我们的 ExpenseEntryListComponent(src/app/expense-entry-list/expense-entry-list.component.ts) 并使用 Material Table 组件。
声明一个变量,displayColumns 并指定要显示的列的列表。
displayedColumns: string[] = ['item', 'amount', 'category', 'location', 'spendOn' ];
ExpenseEntryListComponent模板 (src/app/expense-entry-list/expense-entry-list.component.html)中添加如下指定的材料表并删除我们现有的清单。
<div class="mat-elevation-z8">
   <table mat-table [dataSource]="expenseEntries"> 
      <ng-container matColumnDef="item">
         <th mat-header-cell *matHeaderCellDef> Item </th>
         <td mat-cell *matCellDef="let element" style="text-align: left"> {{element.item}} </td>
      </ng-container>
      <ng-container matColumnDef="amount">
         <th mat-header-cell *matHeaderCellDef > Amount </th>
         <td mat-cell *matCellDef="let element" style="text-align: left"> {{element.amount}} </td>
      </ng-container>
      <ng-container matColumnDef="category">
         <th mat-header-cell *matHeaderCellDef> Category </th>
         <td mat-cell *matCellDef="let element" style="text-align: left"> {{element.category}} </td>
      </ng-container>
      <ng-container matColumnDef="location">
         <th mat-header-cell *matHeaderCellDef> Location </th>
         <td mat-cell *matCellDef="let element" style="text-align:left"> {{element.location}} </td>
      </ng-container>
      <ng-container matColumnDef="spendOn">
         <th mat-header-cell *matHeaderCellDef> Spend On </th>
         <td mat-cell *matCellDef="let element" style="text-align: left"> {{element.spendOn}} </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
</div>
这里,
mat-table 属性用于将普通表转换为材料表。 [dataSource] 属性用于指定表的数据源。 材料表是基于模板的,每一列都可以使用单独的模板进行设计。 ng-container 用于创建模板。 matColumnDef 用于指定应用于特定 ng-container 的数据源的列。 mat-h​​eader-cell 用于指定每列的标题文本。 mat-cell 用于指定每一列的内容。 mat-h​​eader-row 和 mat-row 用于指定列在行中的顺序。 我们只使用了 Material 表的基本功能。材料表具有更多功能,例如排序、分页等。
运行应用程序。
ng serve
应用程序的输出如下-
配置 Angular
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4