如何使用指令动态更改属性？答案

【问题标题】：How to change attributes dynamically with directive?如何使用指令动态更改属性？
【发布时间】：2021-11-11 00:09:25
【问题描述】：

我正在尝试获取 HTML 标记（选择、按钮或输入）以动态分配属性，但我不知道如何在 switch 中执行此操作，如果您有更好的想法，我将不胜感激你可以分享一下

我想识别标签中的开关内部是 or or ，但我不明白我有点迷茫

import { Directive, ElementRef, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appSetValitadions]'
})
export class SetValitadionsDirective {

  validations = [
    {
      typeTagHTML: "select", //(Input, Select)
      tagName: "btnSaveDoc",
      required: "true",
      readonly: "true",
      title: "Example title",
      Icon: ""
    },
    {
      typeTagHTML: "input",
      tagName: "btnSaveDoc",
      required: "false",
      readonly: "false",
      title: "Example title",
      Icon: ""
    },
    {
      typeTagHTML: "button",
      tagName: "btnSaveDoc",
      required: "false",
      readonly: "false",
      title: "Example title",
      Icon: ""
    }
  ]

  constructor(el: ElementRef, renderer: Renderer2) {
    this.setAttributes(el);
  }


  setAttributes(el: ElementRef){
    let validation;

    //PROBLEM
    switch (el.nativeElement.tag) {
      case "input":
        validation= this.validations.find(validation => validation.tagName == el.nativeElement.name);
        el.nativeElement.setAttribute("required", validation?.required);
        el.nativeElement.setAttribute("readonly", validation?.readonly);
        break;
      case "select":
        validation = this.validations.find(validation => validation.tagName == el.nativeElement.name);
        el.nativeElement.setAttribute("required", validation?.required);
        el.nativeElement.setAttribute("readonly", validation?.readonly);
        break;
      case "button":
        validation = this.validations.find(validation => validation.tagName == el.nativeElement.name);
        el.nativeElement.setAttribute("title", validation?.title);
        break;

      default:
        break;
    }
  }

}

【问题讨论】：

标签： javascript angular typescript angular-directive

【解决方案1】：

您在开关中访问了错误的属性，它应该是 el.nativeElement.tagName 而不是 el.nativeElement.tag

作为旁注，您可以修改您的验证数组以转换为一个对象，以便键代表 HTML 标记名称，值是您要附加到它的属性。

const validations = {
    'A': { 
        attrs: {
            required: "true", 
            readonly: "true",
            title: "Example title",
            Icon: "" 
        }
    },
    'INPUT': {
        attrs: {
            required: "false", 
            readonly: "false",
            title: "Example title",
            Icon: "" 
        }
    }
}

然后将属性应用于给定的 HTML 元素，如下所示：

constructor(el: ElementRef, renderer: Renderer2) {
    this.setAttributes(el.nativeElement);
}

setAttributes(el: HTMLElement) {
    const attrs = validations[el.tagName].attrs;
    Object.keys(attrs).forEach(attrName => {
        el.setAttribute(attrName, attrs[attrName]);
    });

}

【讨论】：

它对我有用，谢谢