Angular Material 7 – 滑动开关

Angular Material 7 是一款丰富的UI框架，提供了许多漂亮、易用的组件。其中，滑动开关是一种非常常用的交互式组件，可以帮助用户在两种状态之间进行快速切换。在本文中，我们将学习如何在 Angular Material 7 中使用滑动开关组件。

安装和配置

在使用滑动开关之前，我们需要先安装 Angular Material 7 并进行相应的配置。以下是相关步骤：

安装依赖项

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

添加模块

// app.module.ts

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';

@NgModule({
  imports: [
    FormsModule,
    BrowserAnimationsModule,
    MatSlideToggleModule
  ],
  exports: [
    FormsModule,
    BrowserAnimationsModule,
    MatSlideToggleModule
  ]
})
export class AppModule { }

通过以上代码，我们添加了 FormsModule、BrowserAnimationsModule 和 MatSlideToggleModule 三个模块。

示例

接下来，让我们来看看如何使用 MatSlideToggle 来创建一个滑动开关组件。

<!-- app.component.html -->

<h3>滑动开关示例</h3>
<mat-slide-toggle [(ngModel)]="isToggled">开关</mat-slide-toggle>
<p>开启状态：{{ isToggled }}</p>

在以上示例中，我们使用 [(ngModel)] 双向绑定来实现自动更新开关状态的效果。当用户切换开关状态时，isToggled 属性的值也会随之改变。我们还添加了一个简单的文本来显示当前开关的状态。

接下来，我们需要创建一个相应的组件，并在其中添加 isToggled 属性：

// app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  isToggled: boolean = false;
}

在以上代码中，我们使用 @Component 装饰器来定义了一个 AppComponent 组件，并在其中添加了 isToggled 属性，并将其初始值设为 false。

现在，我们可以运行应用并看到一个漂亮的滑动开关了。

改变颜色

如果我们想要改变滑动开关的颜色，我们可以使用 MatSlideToggle 的 color 属性。

以下是一个示例，我们将颜色设置为 primary：

<!-- app.component.html -->

<h3>滑动开关示例</h3>
<mat-slide-toggle [(ngModel)]="isToggled" color="primary">开关</mat-slide-toggle>
<p>开启状态：{{ isToggled }}</p>

这样我们就可以将滑动开关的颜色从默认的白色改变为 Material Design 中的 primary 颜色。

改变标签

如果我们不想使用默认的“开关”标签，我们也可以给 MatSlideToggle 添加一个自定义标签。

以下是一个示例，我们将标签设置为“启用通知”：

<!-- app.component.html -->

<h3>滑动开关示例</h3>
<mat-slide-toggle [(ngModel)]="isToggled" color="primary">
  启用通知
</mat-slide-toggle>
<p>开启状态：{{ isToggled }}</p>

这样我们就可以使用自定义标签来提升用户体验。