Angular Material 7 – Slider

在移动和Web应用程序开发中，滑块控件是非常实用的一种交互式控件。Angular Material 7是一款为Angular应用程序提供Material Design风格的UI组件库。它提供了丰富的组件来构建现代化的Web应用程序，并且可以轻松集成到你的Angular应用程序中。

其中一个重要的控件就是滑块控件，能够让用户通过拖拽操作在一定的范围内选择一个数值。在本文中，我们将详细介绍如何在Angular Material 7中使用滑块控件。

安装Angular Material 7

在使用Angular Material 7之前，我们需要在应用程序中安装它。可以通过以下命令安装Angular Material 7：

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

这里，我们不仅安装了Angular Material 7组件库，还需要安装 @angular/cdk 和 @angular/animations 库。 @angular/cdk 库提供了一些实用的可重用的组件和服务， @angular/animations 库则提供了Angular中的动画支持。

安装完成之后，我们需要在 app.module.ts 文件中导入和配置Angular Material 7模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatSliderModule } from '@angular/material/slider';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatSliderModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

这里，我们不仅导入了 MatSliderModule，还导入了 BrowserAnimationsModule 模块，因为Angular Material 7 中的动画效果需要使用这个模块。

现在，我们就可以在组件中使用 mat-slider 组件了。

Angular Material 7 滑块控件

mat-slider 组件是基于HTML5 input 标签的，它的用法非常简单：

<mat-slider [(ngModel)]="sliderValue" [min]="0" [max]="100"></mat-slider>

在上面的代码中，我们使用双向数据绑定 [(ngModel)] 把 sliderValue 变量绑定到滑块控件上，同时设置了最小值和最大值。

下面是一个完整的示例：

<mat-slider [(ngModel)]="sliderValue" [min]="0" [max]="100"></mat-slider>
<p>You selected: {{sliderValue}}</p>

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

@Component({
  selector: 'app-slider',
  template: `
  <mat-slider [(ngModel)]="sliderValue" [min]="0" [max]="100"></mat-slider>
  You selected: {{sliderValue}}
  `,
})
export class SliderComponent {
  public sliderValue = 50;
}

在这个示例中，我们创建了一个 SliderComponent 组件，使用 mat-slider 组件来显示一个滑块控件，并在下方显示了当前选中的值。

你可以在Angular应用程序中使用路由来导航到这个组件。