Question

我想知道如何在Angular中添加动态属性。我的意思是说我需要传递属性名称。像这样的东西：

<button [attr.{{attrName}}]="isAllowedAttribute ? attrValue : null" >{{buttonTitle}}/button>

我已经看到this question，但是我想通过attrName传递属性。

有什么主意吗？

Answer 1

您可以使用指令设置动态属性。

请查看https://stackblitz.com/edit/angular-hnjfrg?file=src%2Fapp%2Fdynamic-attr.directive.ts，以了解如何使用它。

您可以使用如下指令：

  <p [dynamicAttr]="'color'" attrValue="red"></p>

并访问如下指令值：

  constructor(el: ElementRef) {
    this.element = el;
  }

  ngAfterViewInit() {
    console.log('Dynamic attribute: ', this.dynamicAttr);
    this.element.nativeElement.style[this.dynamicAttr] = this.attrValue;
  }

您可以根据使用情况使用挂钩。我刚刚使用ngAfterViewInit来设置视图渲染后的所有内容。

Answer 2

编写一条使用属性名称和值的指令。

这是属性名称值的“映射”。
https://stackblitz.com/edit/angular-how-to-add-dynamically-attribute-by-passing-attribute-n?file=src%2Fapp%2Fapp.component.html

Angular如何通过传递属性名称来动态添加属性

2 个答案: