Angular 2 Ändern Sie die Attribute

Question

Ich habe eine Komponente, die eine Reihe von 3 benutzerdefinierte Tasten verfügt, und ich möchte diese Tasten als Steuerelemente für einen Sound-Recorder verwenden. Ich bin in der ersten Phase steckengeblieben, wo ich die auf den Tasten angezeigten Symbole entsprechend ihrer Funktion ändern möchte. Ich habe versucht, dies zu erreichen, indem ich ihre xlink: href-Attribute ändere (ich benutze svg), aber habe das in der Konsole EXCEPTION: Error in ./RecordComponent class RecordComponent - inline template:5:45 caused by: this.roundButtonOne.getAttribute is not a function. Irgendeine Idee warum und wie ich das mit einem Angular2-Ansatz umsetzen könnte? Hier ist der Code:

import {Component, ViewChild} from '@angular/core'; 
 

 
@Component({ 
 
    selector: 'app-record', 
 
    template: ` 
 
    <svg class='roundButtonOne icon'> 
 
     <use #roundButtonOne xlink:href='#mic'(click)='onRecord()'/> 
 
    </svg> 
 
    <svg class='roundButtonTwo icon'> 
 
     <use #roundButtonTwo xlink:href='#live' /> 
 
    </svg> 
 
    <svg class='roundButtonThree icon'> 
 
     <use #roundButtonThree xlink:href='#upload' /> 
 
    </svg> 
 
    </div> 
 
    ` 
 
}) 
 

 
export class RecordComponent { 
 

 
    private recording: boolean = false; 
 

 
    @ViewChild('roundButtonOne') roundButtonOne: HTMLElement; 
 
    @ViewChild('roundButtonTwo') roundButtonTwo: HTMLElement; 
 
    @ViewChild('roundButtonThree') roundButtonThree: HTMLElement; 
 

 

 
    onRecord(){ 
 
    this.recording = true; 
 
    switch(this.roundButtonOne.getAttribute('xlink:href')){ 
 
     case '#mic': 
 
     this.record(); 
 
     break; 
 
    } 
 
    } 
 
    record(){ 
 
    this.roundButtonOne.setAttribute('xlink:href','#mic-small'); 
 
    this.roundButtonTwo.setAttribute('xlink:href', '#pause'); 
 
    this.roundButtonThree.setAttribute('xlink:href', '#stop'); 
 
    } 
 
}

Answer 1

Wenn Sie console.log auf einer der Tastenelemente aufrufen, können Sie sehen, dass es eine Instanz von ist ElementRef, nicht Htmlelement .

So ...

Import ElementRef von @ Winkel/Kern:

import {Component, ViewChild, ElementRef} from '@angular/core'; 

Ändern Sie die Tasten von Htmlelement zu ElementRef Typ:

@ViewChild('roundButtonOne') roundButtonOne: ElementRef; 
@ViewChild('roundButtonTwo') roundButtonTwo: ElementRef; 
@ViewChild('roundButtonThree') roundButtonThree: ElementRef; 

Get nativeElement von ElementRef Objekt und rufen Sie dann setAttribute()/getAttribute() Methoden:

this.roundButtonOne.nativeElement.getAttribute('xlink:href'); 

this.roundButtonOne.nativeElement.setAttribute('xlink:href','#mic-small');