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

Question

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

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

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

Answer 1

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

模板:

<path #path></path>

组件:

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

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

检查这个 stackblitz demo