如何通过Angular Directive指令为HTML标签动态设置属性？

原switch写法的错误修正 #

你现有代码的核心问题是标签类型获取方式错误：

• 原生DOM元素不存在tag属性，需调用tagName属性获取标签名，该属性返回值为全大写格式（比如INPUT/SELECT），需转小写后再做匹配
• 原有规则查找逻辑仅匹配了tagName，未匹配标签类型，同name不同标签的场景会匹配到错误的规则
• input和select的属性设置逻辑完全一致，可以合并case减少重复代码

修正后的setAttributes方法如下：

setAttributes(el: ElementRef){
  // 提前获取当前标签小写名称
  const currentTag = el.nativeElement.tagName.toLowerCase();
  const currentName = el.nativeElement.name;
  // 查找同时匹配标签类型和name的规则，避免匹配错误
  const validation = this.validations.find(item => 
    item.typeTagHTML === currentTag && item.tagName === currentName
  );
  if (!validation) return;

  switch (currentTag) {
    case "input":
    case "select":
      el.nativeElement.setAttribute("required", validation.required);
      el.nativeElement.setAttribute("readonly", validation.readonly);
      break;
    case "button":
      el.nativeElement.setAttribute("title", validation.title);
      break;
    default:
      break;
  }
}

更优实现（无switch，易扩展） #

如果后续要新增更多标签类型的属性配置，完全可以去掉switch语句，用配置映射的方式实现，代码更简洁易维护，也符合Angular最佳实践：

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

@Directive({
  selector: '[appSetValitadions]'
})
export class SetValitadionsDirective {
  // 标签属性配置映射：key为标签名，value为该标签需要设置的属性字段数组
  private tagAttrMap = {
    input: ['required', 'readonly'],
    select: ['required', 'readonly'],
    button: ['title']
  } as const;

  validations = [
    {
      typeTagHTML: "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(private el: ElementRef, private renderer: Renderer2) {
    this.setAttributes();
  }

  setAttributes(){
    const currentTag = this.el.nativeElement.tagName.toLowerCase();
    const currentName = this.el.nativeElement.name;
    const validation = this.validations.find(item => 
      item.typeTagHTML === currentTag && item.tagName === currentName
    );
    // 无匹配规则/无对应标签的属性配置直接返回
    if (!validation || !this.tagAttrMap[currentTag]) return;
    // 遍历配置的属性数组批量赋值，用Renderer2操作DOM适配非浏览器环境
    this.tagAttrMap[currentTag].forEach(attr => {
      this.renderer.setAttribute(this.el.nativeElement, attr, validation[attr]);
    })
  }
}

小提示：如果要设置的属性是HTML原生布尔类型（比如required、readonly），可以把validations里对应字段的字符串值改成布尔类型，设置时判断为true才添加属性，false则移除，更符合HTML规范

内容的提问来源于stack exchange，提问作者Aetos2501