在角度的html元素中动态插入属性

Question

我必须在我想要重新使用的组件中插入一组属性... 现在不同的属性将作为字符串给我... 比方说，我想在我的组件中插入一个元素

<input type="text" maxlength="10" placeholder="enter your name"/>

然后我将所有属性作为单个字符串

attr = 'type="text" maxlength="10" placeholder="enter your name"'

在我的组件的控制器中... 我必须在html中将其插入我的伙伴...

我试过了

<input {{attr}}/>

和

<input {{jQuery.parseHtml(attr)}} 

等。

但它不起作用......也找不到任何解决方案...... 请分享任何有用的解决方案或链接/参考资料......

Answer 1

您可以使用@Input属性将数据传递给嵌套的可重用组件。但是，AFAIK没有一种简单的方法来传递一串html属性并自动应用它们。您需要在单独的输入属性上传递它们，或者编写代码来自己处理字符串并将它们映射到用于绑定的属性。

Answer 2

1. 对要动态更改的每个属性使用绑定

组件：

typeTxt: string = "text";
maxLengthNum: number = 10;
placeholderString: string ="enter your name";

HTML：

<input [type]="typeTxt" [maxlength]="maxLengthNum" [placeholder]="placeholderString"/>

请参阅documentation以更好地理解数据绑定并处理不同的属性类型（属性，事件，双向等）

1. 使用父标记动态更改模板

组件：

htmlString: string = '<input type="text" maxlength="10" placeholder="enter your name"/>';

Html：

<div [innerHTML]="htmlString"></div>

结果：

<div>
    <input type="text" maxlength="10" placeholder="enter your name"/>
</div>