Angular2

Question

denetleyicisindeki şablondan yerel bir değişkene erişiyorum <audio controls> yerel öğeye erişmeye ihtiyacım olan bir bileşen yazıyorum. Ben

gerçekten hiçbir basit bir yolu var mı .. ben çok unelegant ve aynı zamanda warns of the risks when using ElementRef Angular2 düşünüyorum çalışsa da bu this.elementRef.nativeElement.querySelector("audio");

gibi ElementRef kullanarak ngOnInit() onu alarak şimdi bunu böyle yapıyorum?

<audio controls #player> ile yerel bir değişken olarak işaretleyebilir ve bir şekilde yerel öğesine this.player veya denetleyiciden benzer bir şekilde erişebilir miyim?

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. Kullanım @ViewChild görünümde bazı eleman erişmek için.
2. Bir öğenin 'src' özniteliğine bağ oluşturmak için [attr.src] kullanın.
3. Herhangi bir nedenle DOM'yi zorunlu olarak değiştirmeniz gerekiyorsa, Renderer kullanın. Bkz.
( )

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