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

Question

我正在尝试获取 HTML 标记（Select、按钮或输入）以动态分配属性，但我不知道如何在开关中执行此操作，如果你有更好的主意，如果你能分享，我将不胜感激

我想认出标签里面的switch是a 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;
    }
  }

}

Answer 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]);
    });

}

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

How to change attributes dynamically with directive?

javascript

typescript

angular-directive

angular