Angular2

Question

में नियंत्रक में टेम्पलेट से स्थानीय चर का उपयोग करें मैं एक घटक लिख रहा हूं जहां मुझे <audio controls> देशी तत्व तक पहुंच की आवश्यकता है। मैं इसे इस तरह अब ngOnInit() में यह हो रही द्वारा इस this.elementRef.nativeElement.querySelector("audio");

तरह ElementRef का उपयोग करते समय यह काम करता है मुझे लगता है कि यह बहुत unelegant है और Angular2 भी warns of the risks when using ElementRef द्वारा .. कर रहा हूँ

वहाँ वास्तव में कोई आसान तरीका है?

क्या मैं इसे <audio controls #player> के साथ स्थानीय चर के रूप में चिह्नित कर सकता हूं और किसी भी तरह से देशी तत्व को this.player या नियंत्रक से समान कुछ के माध्यम से एक्सेस कर सकता हूं?

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. उपयोग @ViewChild ध्यान में रखते हुए कुछ तत्व तक पहुँचने के लिए।
2. किसी तत्व के 'src' विशेषता को बाध्यकारी बनाने के लिए [attr.src] का उपयोग करें।
3. किसी कारण से आपको DOM को अनिवार्य रूप से बदलने की आवश्यकता है, तो Renderer का उपयोग करें।

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