html - 在Angular 2中(单击)绑定(bind)到单独的元素

当您单击播放按钮的图像时，我有一个要播放的html音频元素。我正在Angular 2中工作，所以它比仅使用jQuery绑定(bind)要复杂一些……这是到目前为止的内容:

@Component({
selector: 'listen',
template: `
    <h1>Play Your Greeting!</h1>

    <img src="../images/play.svg" (click)="playMusic($event)">
    <audio controls src="../music/06 What Is The Light_.mp3">
`,
styles: [`
        img {
            width: 30%;
        }
`]
})
export class ListenComponent {


constructor(
    private listenService: ListenService,
    private route: ActivatedRoute,
    private router: Router
    ) {}

playMusic(event) {
    console.log(event.target);
    event.target.play();
}
}

显然，该事件正在附加到图像上，但是以某种方式我需要在音频标签上调用.play()。

最佳答案

您可以只将局部变量分配给audio元素，然后将其传递给方法调用

<img src="../images/play.svg" (click)="playMusic(audioEl)">
<audio #audioEl controls src="../music/06 What Is The Light_.mp3">

playMusic(el: HTMLAudioElement) {
  el.play();
}

参见#audioEl。这是将audio元素分配给模板可访问变量。您可以看到它正在传递给playMusic方法调用