通过按钮递增和递减“角度材料”滑块

Question

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

有人知道一种避免重复逻辑的方法，例如，仅通过向滑块发送“自己增加/减少”事件即可。

Answer 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']();
  }

Stackblitz

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

Answer 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函数，以触发滑块的更改。