Dostęp do zmiennej lokalnej z szablonu w kontrolerze w Angular2

Question

Piszę komponent, w którym potrzebuję dostępu do elementu natywnego <audio controls>. Robię to tak teraz przez coraz to w ngOnInit() za pomocą ElementRef jak ten this.elementRef.nativeElement.querySelector("audio");

Chociaż to działa myślę, że jest bardzo unelegant i Angular2 również warns of the risks when using ElementRef ..

Czy naprawdę nie ma prostszy sposób?

Czy mogę oznaczyć go jako zmienną lokalną z <audio controls #player> i jakoś uzyskać dostęp do elementu macierzystego przez this.player lub coś podobnego z kontrolera?

import {Component, OnInit, ElementRef, Input} from 'angular2/core'; 

@Component({ 
    selector: 'audio-preview', 
    template: ` 
     <audio controls> 
      <source [src]="src" type="audio/mpeg"> 
      Your browser does not support the audio element. 
     </audio> 
    ` 
}) 

export class AudioPreview implements OnInit { 

    @Input() src: string; 

    constructor(public elementRef: ElementRef) {} 

    ngOnInit() { 
     var audioElement = this.getAudioElement(); 
     audioElement.setAttribute('src', this.src); 
    } 

    getAudioElement() : HTMLAudioElement { 
     return this.elementRef.nativeElement.querySelector("audio"); 
    } 
} 

Answer 1

1. Zastosowanie @ViewChild dostęp do jakiś element w widoku.
2. Użyj [attr.src] do tworzenia powiązania z atrybutem "src" elementu.
3. Użyj Renderer, jeśli z jakiegoś powodu musisz bezwzględnie zmienić DOM.

Zobacz this plunk.

import {Component, Input, ViewChild, Renderer} from 'angular2/core'; 

@Component({ 
    selector: 'audio-preview', 
    template: ` 
    <audio controls #player [attr.src]="src"> 
     <source [src]="src" type="audio/mpeg"> 
     Your browser does not support the audio element. 
    </audio> 
    ` 
}) 
export class AudioPreview { 
    @Input() src: string; 
    @ViewChild('player') player; 

    constructor(public renderer: Renderer) {} 

    ngAfterViewInit() { 
    console.log(this.player); 

    // Another way to set attribute value to element 
    // this.renderer.setElementAttribute(this.player, 'src', this.src); 
    } 
}