通过按钮增加和减少 Angular Material 滑块答案

【问题标题】：Increment and decrement Angular Material slider via buttons通过按钮增加和减少 Angular Material 滑块
【发布时间】：2019-03-08 10:43:30
【问题描述】：

除了Angular Material (7.3) slider 的滑动功能之外，我的应用程序还有递增和递减按钮，可将滑块移动一个step。增量和减量按钮位于滑块外部，将滑块行为与最小值、最大值、步长和键盘交互行为进行复制。

有没有人知道一种避免重复逻辑的方法，也许只是为滑块提供“增加/减少自己”事件？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

您可以执行以下操作来完成此操作。

在组件中获取对您的mat-slider 的引用。

import {MatSlider} from '@angular/material';

@ViewChild(MatSlider) _matSlider: MatSlider;

然后创建您的增量和减量方法。

将正数传递给私有_increment 方法将递增，传递负数将递减...然后您需要手动调用_emitInputEvent 和_emitChangeEvent 方法来更新值。

public IncrementSlider(){
    this._matSlider['_increment'](1);
    this._matSlider['_emitInputEvent']();
    this._matSlider['_emitChangeEvent']();
  }

   public DecrementSlider(){
    this._matSlider['_increment'](-1);
    this._matSlider['_emitInputEvent']();
    this._matSlider['_emitChangeEvent']();
  }

堆栈闪电战

https://stackblitz.com/edit/angular-1bly2u?embed=1&file=app/slider-configurable-example.ts

【讨论】：

【解决方案2】：

我的建议是查看code example they provide 并单击查看源代码按钮（类似于< >）以了解有关如何使用 API 的更多详细信息。

听起来您想要的是让滑块的当前值能够通过用户直接与滑块交互或通过单击按钮来更改。实现这一点的方法是使用two-way data binding。这将允许在按下按钮时发生的更改反映在滑块的当前值以及滑块本身更新此值时。

对于模板：

<mat-slider
  [step]="step"
  [(ngModel)]="value">
<mat-slider>

在您的组件中：

class ComponentClass {
  value = 0;
  step = 1;
  // other vals

  increaseSlider() {
    this.value += this.step;
  }

  decreaseSlider() {
    this.value -= this.step;
  }
}

这些increaseSlider() 和decreaseSlider() 函数可以从按钮click 事件中调用，以触发滑块的变化。

【讨论】：

感谢您查看这个问题，布雷迪。你的建议基本上就是我今天正在做的事情。我不喜欢这种特殊的解决方案，因为增量、减量、最大值、最小值和键盘交互逻辑的重复。