Связывание с отдельным элементом on (click) в Angular 2

Question

У меня есть элемент html audio, который я хотел бы играть, когда вы нажимаете изображение кнопки воспроизведения. Я работаю в угловых 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.