Angular 2组件向自定义指令传递Map对象仅收到[object Map]字符串如何解决

问题诱因 #

• 你使用的{{ }}是Angular的字符串插值绑定语法，该绑定会自动对所有传入值调用toString()方法序列化为字符串，仅适合传递基础类型参数
• Map属于引用类型，默认的toString()返回值为固定的[object Map]，因此指令最终接收到的是序列化后的字符串，而非原始的Map对象

修复方案 #

将模板中的插值绑定替换为Angular的属性输入绑定，该绑定方式可以直接传递引用类型的原始引用，不会自动做序列化转换：

错误写法 #

<input type='text' differences={{differences}}>

正确写法 #

<input type='text' [differences]="differences">

修改完成后，指令内的@Input就能接收到完整的Map实例，类型也会匹配声明的Map<string,ObjectDifference>类型。

内容的提问来源于stack exchange，提问作者Yuri Gridin