typescript - Angular 2 : JsonObject as @Input value

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 解析的原因？

• 如何让它发挥作用？
• 我是否必须在我的组件上创建这个“Param 对象”，然后使用变量将其传递给模板？
• 是否有最佳实践？

Answer 1

如果你想分配一个对象使用[propName]="value"语法

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

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

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

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

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