Увеличивайте и уменьшайте слайдер Angular Material с помощью кнопок

Question

В дополнение к функциям слайдера ползунка Angular Material (7.3) , мое приложение имеет кнопки увеличения и уменьшения, которые перемещают ползунок на одну 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

Я бы посоветовал взглянуть на пример кода , который они предоставляют , и нажать на кнопку просмотра исходного кода (которая выглядит как < >), чтобы получить более подробную информацию об использовании API.

Звучит так, будто вы хотите, чтобы текущее значение ползунка можно было изменить либо от пользователя, непосредственно взаимодействующего со ползунком, либо от нажатия на кнопки.Это можно сделать с помощью двусторонней привязки данных 1007 *.Это позволит вносить изменения, которые происходят при нажатии кнопки, для отражения в текущем значении ползунка, а также когда сам ползунок обновляет это значение.

Для шаблона:

<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, чтобы вызвать изменение в ползунке.