如何获取"Angular Material"滑块的当前值? [英] How to get current value of Angular Material slider?

问题描述

我的问题与 获取mdslider值(角度2)? 因为我需要将滑块的值传递给组件，而不是 只需使用局部变量即可；而且在角度材料方面 已经更改，因此滑块现在需要将$ event对象 传递给组件函数.

My question is different to Get mdslider value in angular 2? in that I needed to pass the value of the slider to the component, not just use a local variable; but also in respect of Angular Material having changed so that the slider now requires an $event object to be passed to the component function.

我在Angular 4中有一个Angular Material滑块组件:

I have an Angular Material slider component in Angular 4:

HTML

<mat-slider min="430" max="500" step="10" value="450" (input)="pitch($event)"></mat-slider>

TS

import { Component, OnInit } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { MatSlider } from '@angular/material';
import { AudioContext } from 'angular-audio-context';

@Component({
  selector: 'pitch-slider',
  templateUrl: './pitch-slider.component.html',
  styleUrls: ['./pitch-slider.component.css']
})


export class PitchSliderComponent implements OnInit {



  constructor(private _audioContext: AudioContext) { }

  ngOnInit() {
  }

}

我对Angular还是很陌生，但是在获取滑块的当前值时遇到了麻烦.似乎不适用于$ event对象吗?

I am quite new to Angular and I'm having trouble getting the current value of the slider. It doesn't seem to work with $event object?

推荐答案

我对$ event对象感到困惑-我需要用component.ts中的event引用它:

I was confused about the $event object - I needed to ref it with just event in the component.ts:

HTML

<h2>freq.</h2>
  <button class="btn btn-primary" (click)="play()">Play</button>
  <mat-slider min="430" max="500" step="10" #matslider (input)="pitch($event)"></mat-slider>

      <div>
        {{ matslider.value }}
      </div>

TS

import { Component, OnInit } from '@angular/core';
import { Inject, Injectable } from '@angular/core';
import { MatSlider } from '@angular/material';
import { AudioContext } from 'angular-audio-context';


@Component({
  selector: 'pitch-slider',
  templateUrl: './pitch-slider.component.html',
  styleUrls: ['./pitch-slider.component.css']
})


export class PitchSliderComponent implements OnInit {
  value: 450;

  constructor(private _audioContext: AudioContext) { }

  ngOnInit() {
  }

  pitch(event: any) {
  console.log(event.value);
}

  play() {
    console.log("play clicked!");
    var frequency = this.value;
    var volume = 0.2;
    var oscillator = this._audioContext.createOscillator();
    var gainNode = this._audioContext.createGain();

    oscillator.connect(gainNode);
    gainNode.connect(this._audioContext.destination);

    gainNode.gain.value = volume;
    oscillator.frequency.value = frequency;

    oscillator.start();

    setTimeout(
      function(){
        oscillator.stop();
      }, 500
    );
  }

}

这篇关于如何获取"Angular Material"滑块的当前值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！