在Angular 7中有没有办法为模板html属性* key *使用变量？

Question

我正在寻找一种将变量用于模板html属性key的方法。例如，

<path [attr.data-**<use-variable-here>**]="edge.id"></path>

Angular 7+中有没有办法做到这一点？

Answer 1

您可以通过@ViewChild执行此操作。

模板：

<path #path></path>

Component：

@ViewChild('path', {static:true}) path: ElementRef;

//... some lifecycle hook | method | callback
ngOnInit() {
  const customVariable = 'my-custom';
  this.path.nativeElement.setAttribute(`data-${customVariable}`, 'my-custom');
}

检查此堆叠闪电战demo