我的问题与获取角度 2 中的 mdslider 值? https://stackoverflow.com/questions/46906219/get-mdslider-value-in-angular-2因为我需要将滑块的值传递给组件,而不是
只需使用局部变量;而且还涉及角度材料
已更改,因此滑块现在需要 $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';
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 对象?
我对 $event 对象感到困惑 - 我需要仅使用 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
);
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)