template - Acceda a una variable local desde la plantilla en el controlador en Angular2

data binding angular 4

Question

Estoy escribiendo un componente donde necesito acceder al elemento nativo <audio controls> . Lo estoy haciendo así ahora obteniéndolo en ngOnInit() usando ElementRef como este this.elementRef.nativeElement.querySelector("audio");

Si bien funciona, creo que es muy poco elegante y Angular2 también advierte sobre los riesgos al usar ElementRef .

¿Realmente no hay una manera más simple?

¿Puedo marcarlo como una variable local con <audio controls #player> y de alguna manera acceder al elemento nativo a través de this.player o algo similar desde el controlador?

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. Use @ViewChild para acceder a algún elemento en la vista.
2. Utilice [attr.src] para crear el enlace al atributo ''src'' de un elemento.
3. Use Renderer si por alguna razón necesita cambiar el DOM imperativamente.

Mira este truco .

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