具有动态属性的 Angular 指令答案

【问题标题】：Angular Directive with dynamic attributes具有动态属性的 Angular 指令
【发布时间】：2018-02-23 22:11:03
【问题描述】：

我需要在 Angular 中呈现控件的属性。属性将基于属性进行配置。用户将发送一个 JSON 文件，该文件将被序列化为 typescript 中的一个对象。此打字稿文件将用作组件上的绑定。

{
      "row": 1,
      "col": 2,
      "key": "Input_2",
      "label": "First Name",
      "required": true,
      "type": 1,
      "hiddden": false,
      "maxLength": 100,
      "attributes": "required validateEqual='password' reverse='false'"
}


export class ControlBase<T> {
    row: number;
    col: number;
    value?: string;
    key: string;
    label: string;
    required: boolean;
    type: ControlType;
    hidden: boolean = false;
    attributes: string;
}

<input class="form-control" type="text" [(ngModel)]="value" {{control.attributes}}>

当我使用上述绑定 {{control.attributes}} 时，我收到以下错误：无法在“元素”上执行“setAttribute”：“{{control.attributes}}”不是有效的属性名称。

【问题讨论】：

标签： angular

【解决方案1】：

我认为没有任何模板语法可以让您设置动态数量的参数。但是可以通过代码实现这是一个示例https://stackblitz.com/edit/angular-svcvsj

使用浏览器的开发者工具检查输入元素。属性应该在那里。我建议对属性使用强类型对象以避免在那里进行额外的字符串解析

【讨论】：

这正是我所需要的。谢谢
只是另一件事。例如，如果其中一个属性是另一个指令。该指令似乎不起作用。即“属性”：“显示需要 validateEqual='password' reverse='false'”。请查看示例：angular-ddqbzt.stackblitz.io。谢谢
你不能在 Angular 中动态添加指令。它只是不能像开箱即用那样工作:)。属性和指令不是一回事。 Angular 在引导时或提前预编译模板，之后添加的任何内容都被视为常规属性。