角2の変更属性

Question

3つのカスタムボタンのセットを備えたコンポーネントがあり、これらのボタンをサウンドレコーダーのコントロールとして使用したいと考えています。私は最初のフェーズで立ち往生しました。そこで、ボタンに表示されているシンボルをその機能に従って変更したいのです。私はxlink：href属性（私はsvgを使用）を変更することでこれを達成しようとしましたが、彼はコンソールでこれを手に入れましたEXCEPTION: Error in ./RecordComponent class RecordComponent - inline template:5:45 caused by: this.roundButtonOne.getAttribute is not a function。なぜ、どのように私はAngular2のアプローチでこれを実装することができますか？ここでは、コードは次のようになります。

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

ボタン要素の一つににconsole.logを呼び出した場合、あなたはそれがElementRef、ないのHTMLElementのインスタンスであることがわかります。

そう...角度/コア@から

インポートElementRef：ElementRef からnativeElement

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

ゲット：ボタンがElementRefへのHTMLElementから入力

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

変更オブジェクトを呼び出し、を呼び出します。setAttribute（）/のgetAttribute（）メソッド：

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

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