Angular2在组件中设置音频currentTime

Question

以下是创建 HTML 5 音频元素的 html 内容：

  <audio id ="audio2"controls="controls" autoplay="false" (canplay)="CanPlay($event)">
            <source src="http://localhost:51657/Audio/1" type="audio/mp3"> 
</audio>

下面是我尝试将当前时间设置为某个默认值的组件，注释代码工作正常，但是请建议如何以 Angular2 的方式做同样的事情？。

    import { OnInit, Output,Component, Injectable, EventEmitter } from '@angular/core';
    declare let $: any;
@Component({
    selector: 'audio-tag',
  templateUrl: './audio-tag.component.html',
})

@Injectable()
export class AudioComponent implements OnInit {
 @Output() canplay: EventEmitter<any> = new EventEmitter();
   audio:any;
    playBtn: any;
    pauseBtn: any
    currentTime:any;
    timer:any;
    duration:any;

    sound: any;
    ngOnInit(): void {
//     $('#audio2').bind('canplay', function() {
//   this.currentTime = 20;
// });
          }       

    CanPlay(){
      console.log('canplay');        
      this.currentTime=10;
      this.audio.currentTime = 20;
    }
}

Answer 1

AudioComponent 应该用@Component({...}) 装饰而不是@Injectable()

@Component({
selector: 'my-audio-player',
 templateUrl: `
    <audio id ="audio2"controls="controls" autoplay="false" 
  (canplay)="CanPlay($event)">
        <source src="http://localhost:51657/Audio/1" type="audio/mp3"> 
 </audio>
`
}) 
export class AudioComponent implements OnInit { ... }