Angular Material 7 – 标签页

在Angular应用中使用标签页是非常常见的。 Angular Material提供了一个非常方便的组件mat-tab-group来实现标签页的功能。在本文中，我们将学习如何使用Angular Material 7中的mat-tab-group来实现标签页。

创建Angular应用

在开始之前，我们需要创建一个新的Angular 7应用程序。可以以如下的命令来创建一个名为my-app的新Angular应用：

ng new my-app

安装Angular Material 7

Angular Material 7可以通过npm包管理器安装。使用如下命令安装Angular Material 7：

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

安装完成后，在app.module.ts文件中导入并添加以下模块：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatTabsModule } from '@angular/material/tabs';

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

完成上述配置后，我们就可以在angular应用中使用mat-tab-group组件了。

创建一个简单的标签页

下面让我们创建一个非常简单的标签页，其中包含两个标签页。首先，我们需要在组件类中添加以下两个变量：

selectedTabIndex = 0;
tabOptions = [
  { label: '标签1', content: '标签页面1的内容。' },
  { label: '标签2', content: '标签页面2的内容。' },
];

然后我们可以利用这些变量在template中创建简单的标签页：

<mat-tab-group [(selectedIndex)]="selectedTabIndex">
  <mat-tab *ngFor="let tab of tabOptions" label="{{ tab.label }}">
    {{ tab.content }}
  </mat-tab>
</mat-tab-group>

在上面的示例中，我们将selectedTabIndex变量与mat-tab-group组件的selectedIndex属性绑定。因此，当用户切换标签页时，该变量的值会自动更新。

我们使用ngFor指令来迭代tabOptions数组，为每个选项创建一个mat-tab元素并设置标签页的标签和内容。

我们现在有一个运行良好的标签页了。

标签页进阶

让我们继续改进我们的标签页。我们将添加一个新的标签页以展示表格页面，该页面将显示一个用户列表。

要添加新的标签页，我们需要做几件事情：首先是创建一个新的组件。继承Component类并使用@Component装饰器。在本例中，我们将创建一个名为UserListComponent的新组件。可使用如下命令创建：

ng generate component user-list

接下来，我们需要把新的组件添加到标签页组件中的mat-tab元素中。

<mat-tab *ngFor="let tab of tabOptions" label="{{ tab.label }}">
  <ng-container *ngIf="tab.content === '列表'">
    <app-user-list></app-user-list>
  </ng-container>
  <ng-container *ngIf="tab.content !== '列表'">
    {{ tab.content }}
  </ng-container>
</mat-tab>

上面的示例将我们在标签页组件中创建的tabOptions数组复制到template中，使用ngFor指令为每个选项创建一个mat-tab元素。针对选项“列表”，我们创建了一个具有app-userlist元素的新标签页，这是由app-user-list提供的用户列表组件。

在UserListComponent中，我们将使用Angular Material表格和卡片组件来创建我们的用户列表页面。

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

    <!-- Position Column -->
    <ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef>编号</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.position}}</mat-cell>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <mat-header-cell *matHeaderCellDef>名字</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.name}}</mat-cell>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="weight">
      <mat-header-cell *matHeaderCellDef>体重</mat-header-cell>
      <mat-cell *matCellDef="let element">{{element.weight}}</mat-cell>
    </ng-container>

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

上面的示例使用Angular Material表格和卡片组件创建用户列表。由于我们在UserListComponent中使用了这些组件，因此，我们需要确保AppModule中导入了这些组件。另外，为了使它们工作，我们需要了解如何在user数据源中提供一组用户。此处不再介绍，此处假设我们已具有getUserList()方法查询需求数据的响应。

用户列表组件的样式可以通过CSS进行自定义。见下：

.mat-card {
  margin-top: 20px;
  width: 80%;
}

.mat-table {
  width: 100%;
}

结论

Angular Material 7中的标签页组件(mat-tab-group)可以帮助我们轻松地创建，修改和管理标签页。在本文中，我们已经学习了如何在Angular应用程序中使用mat-tab-group组件，还学习了如何为标签页添加新的组件来实现更多功能。我们也利用Angular Material表格和卡片组件在页面上展示用户列表。我们使用的示例是非常基础的，为了更深入地了解Angular Material 7标签页的其他用途，您可以查阅官方文档http://material.angular.io/。