如何获取角度材质滑块的当前值? [英] How to get current value of Angular Material slider?
问题描述
我的问题与获取角度 2 中的 mdslider 值?因为我需要将滑块的值传递给组件,而不是只需使用局部变量;但也关于角材料已更改以便滑块现在需要一个 $event 对象传递给组件函数.
我在 Angular 4 中有一个 Angular Material 滑块组件:
HTML
<mat-slider min="430" max="500" step="10" value="450" (input)="pitch($event)"></mat-slider>
TS
import { Component, OnInit } from '@angular/core';从'@angular/core'导入{注入,可注入};从'@angular/material' 导入 { MatSlider };从'angular-audio-context'导入{AudioContext};@成分({选择器:'音高滑块',templateUrl: './pitch-slider.component.html',styleUrls: ['./pitch-slider.component.css']})导出类 PitchSliderComponent 实现 OnInit {构造函数(私有_audioContext:AudioContext){}ngOnInit() {}}
我对 Angular 很陌生,但无法获取滑块的当前值.它似乎不适用于 $event 对象?
我对 $event 对象感到困惑 - 我需要在 component.ts 中仅使用 event 来引用它:
HTML
freq.
<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 }}
TS
import { Component, OnInit } from '@angular/core';从'@angular/core'导入{注入,可注入};从'@angular/material' 导入 { MatSlider };从'angular-audio-context'导入{AudioContext};@成分({选择器:'音高滑块',templateUrl: './pitch-slider.component.html',styleUrls: ['./pitch-slider.component.css']})导出类 PitchSliderComponent 实现 OnInit {值:450;构造函数(私有_audioContext:AudioContext){}ngOnInit() {}音高(事件:任何){控制台日志(事件.值);}玩() {console.log("点击播放!");var 频率 = this.value;无功体积 = 0.2;var 振荡器 = this._audioContext.createOscillator();var gainNode = this._audioContext.createGain();振荡器连接(增益节点);gainNode.connect(this._audioContext.destination);gainNode.gain.value = 音量;振荡器.频率.值=频率;振荡器.开始();设置超时(功能(){振荡器.停止();}, 500);}}
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.
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() {
}
}
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?
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
);
}
}
这篇关于如何获取角度材质滑块的当前值?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!