mat-button-toggle 的更改或单击事件

typescript

mat-button-toggle 是 Angular Material 库中的一个组件，用于创建切换按钮。当用户更改或单击按钮时，可以触发相应的事件。本文将介绍如何使用 mat-button-toggle 组件，并提供一个案例代码。

在使用 mat-button-toggle 组件之前，我们需要先安装并导入 Angular Material 库。可以使用以下命令安装 Angular Material：

npm install @angular/material

然后，在需要使用 mat-button-toggle 的组件中，导入所需的模块：

typescript
import { MatButtonToggleModule } from '@angular/material/button-toggle';
@NgModule({
  ...
  imports: [
    ...
    MatButtonToggleModule
  ],
  ...
})
export class AppModule { }

接下来，我们可以在模板中使用 mat-button-toggle 组件了。以下是一个简单的例子：

html
<mat-button-toggle-group (change)="toggleButtonChange($event)">
  <mat-button-toggle value="option1">选项1</mat-button-toggle>
  <mat-button-toggle value="option2">选项2</mat-button-toggle>
  <mat-button-toggle value="option3">选项3</mat-button-toggle>
</mat-button-toggle-group>

在上面的示例中，我们创建了一个 mat-button-toggle-group，内部包含了三个 mat-button-toggle。当用户更改选中的按钮时，会触发 (change) 事件，并调用 toggleButtonChange 方法。

现在，我们需要在组件的 typescript 代码中实现 toggleButtonChange 方法：

typescript
toggleButtonChange(event: MatButtonToggleChange) {
  console.log('选中的值：', event.value);
}

在上面的代码中，我们通过 MatButtonToggleChange 事件对象可以获取到用户选中的值，并在控制台中打印出来。

案例代码：

在一个购物网站中，我们可以使用 mat-button-toggle 组件来实现商品排序功能。用户可以根据价格、销量或评分来排序商品列表。以下是一个示例代码：

html
<mat-button-toggle-group (change)="sortProducts($event)">
  <mat-button-toggle value="price">价格</mat-button-toggle>
  <mat-button-toggle value="sales">销量</mat-button-toggle>
  <mat-button-toggle value="rating">评分</mat-button-toggle>
</mat-button-toggle-group>
<div *ngFor="let product of sortedProducts">
  {{ product.name }} - 价格：{{ product.price }} - 销量：{{ product.sales }} - 评分：{{ product.rating }}
</div>

typescript
import { Component } from '@angular/core';
@Component({
  ...
})
export class ProductListComponent {
  products = [
    { name: '商品1', price: 99.99, sales: 100, rating: 4.5 },
    { name: '商品2', price: 49.99, sales: 50, rating: 3.5 },
    { name: '商品3', price: 79.99, sales: 80, rating: 4.0 }
  ];
  sortedProducts = this.products;
  sortProducts(event: MatButtonToggleChange) {
    const sortBy = event.value;
    switch (sortBy) {
      case 'price':
        this.sortedProducts = this.products.sort((a, b) => a.price - b.price);
        break;
      case 'sales':
        this.sortedProducts = this.products.sort((a, b) => b.sales - a.sales);
        break;
      case 'rating':
        this.sortedProducts = this.products.sort((a, b) => b.rating - a.rating);
        break;
    }
  }
}

在上面的代码中，我们创建了一个商品列表，包含了商品的名称、价格、销量和评分。通过 mat-button-toggle 组件，用户可以选择按照价格、销量或评分来排序商品列表。当用户选择不同的排序方式时，会触发 sortProducts 方法，根据选择的方式重新排序商品列表，并在页面上显示出来。

：

使用 mat-button-toggle 组件可以方便地创建切换按钮，并通过事件来响应用户的选择。通过上述案例代码，我们展示了如何使用 mat-button-toggle 组件来实现商品排序功能。希望本文对你理解和使用 mat-button-toggle 组件有所帮助。