Angular2：JsonObject 作为@Input 值

Question

Angular2：2.0.0-beta8

我想自定义一个指令。为了实现这一点，我创建了一个包含所有自定义参数的对象，我希望像这样将它传递给我的模板：

我在模板中使用的指令：

<div my-directive="{param1: 46, param2: 48}"></div>

---

在我的指令中输入：

@Input('my-directive')
public conf: Configuration;

---

参数对象定义：

export interface Configuration{param1;param2; ...}

---

很遗憾，它不起作用。也许是 Json 解析的原因？

• 如何让它工作？
• 我是否必须在我的组件上创建这个“参数对象”，并使用变量将其传递给模板？
• 是否有最佳做法？

Answer 1

如果要分配对象，请使用 [propName]="value" 语法

[my-directive]="{param1: 46, param2: 48}"

这是不涉及 Angular 的标准属性绑定。

<div my-directive="{param1: 46, param2: 48}"></div>

属性只能保存字符串。 @Input() 在字符串化后从属性中读取值。

提示：对于输入、输出和指令名称，myDirective 优于 my-directive。只有元素名称使用my-element 来实现自定义元素的兼容性。