web-dev-qa-db-ja.com

Angular 2つの属性の変更

3つのカスタムボタンのセットを備えたコンポーネントがあり、これらのボタンをサウンドレコーダーのコントロールとして使用したいと思います。ボタンに表示される記号を機能に応じて変更したいという第1段階で行き詰まりました。 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');
  }
}
javascriptangular2-directives
6
Radu Miron

ボタン要素の1つでconsole.logを呼び出すと、それがHTMLElementではなくElementRefのインスタンスであることがわかります。

そう...

@ angular/coreからElementRefをインポートします：

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

ボタンの種類をHTMLElementからElementRefに変更します。

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

ElementRefオブジェクトからnativeElementを取得し、setAttribute（）/getAttribute（）メソッドを呼び出します。

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

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

src, href, textのようなElementの直接プロパティを使用することもできます。

TS

this.link.nativeElement.href = 'Microsoft.com';
this.link.nativeElement.text = 'Microsoft';
this.myimage.nativeElement.src = 
   'https://cdn0.iconfinder.com/data/icons/flowers-and-leaves/42/flower_2-512.png';

HTML

<img #myimage width="100px" 
             src="https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png" />
<a #mylink href="google.com">Google</a>
<br>
<button (click)="change()">Change</button>

デモ https://stackblitz.com/edit/angular-set-attribute-element?file=src/app/app.component.html

2
Hien Nguyen