綁定到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方法調用