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/。