角度2の要素を別々にバインドする（クリック）

Question

再生ボタンの画像をクリックすると、再生したいhtmlオーディオ要素があります。

@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(); 
} 
} 

が明らかにイベントが画像に添付されていますが、どういうわけか、私は必要があります。私はそれがここで私はこれまでにしているものだ...ただ結合のjQueryを使用するよりも、もう少し複雑だ角度2で働いています。オーディオタグで呼び出されるplay（）。あなたはちょうどそのメソッド呼び出し

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

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

に渡し、audio要素にローカル変数を割り当てることができます

Answer 1

は#audioElを参照してください。これは、audio要素をテンプレートにアクセス可能な変数に割り当てています。 playMusicメソッド呼び出しに渡されていることがわかります