绑定到Angular 2上的单独元素（单击）

Question

我有一个html音频元素，当您单击播放按钮的图像时，我想播放该元素。我在角2工作，所以它不仅仅是使用jQuery结合更复杂一点......这是我到目前为止有：

@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（）在音频标签上被调用。

Answer 1

你可以只分配一个本地变量为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方法调用