如何更改属性

我有一个组件，其中包含一组三个自定义按钮，我想使用这些按钮作为录音机的控件。

我陷入了第一阶段，我想根据按钮的功能更改按钮上显示的符号。

我试图通过改变他们的方式来实现这一目标xlink:href属性（我使用 svg），但在控制台中得到了这个：

EXCEPTION: Error in ./RecordComponent class RecordComponent - inline template:5:45 caused by: this.roundButtonOne.getAttribute is not a function

知道为什么以及如何使用 Angular 方法来实现这一点吗？这是代码：

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

如果你打电话控制台日志在其中一个按钮元素上，您可以看到它是一个实例元素参考, not HTML元素.

So...

从 @angular/core 导入 ElementRef：

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

将按钮类型从 HTMLElement 更改为 ElementRef：

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

Get 原生元素 from 元素参考对象然后调用设置属性() / 获取属性()方法：

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

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