为什么在绑定到我的子组件时不能在Angular 2中使用插值

Question

如果我想绑定＆＃39; src＆＃39;一个＆＃39;图像＆＃39;标签我可以做任何一个

<img src='{{heroImageUrl}}'>

或

<img [src]='heroImageUrl'>

但如果我有一个使用选择器的子组件，我可以

<app-child [hero]='myHero'></app-child1>

但不是

<app-child hero={{myHero}}></app-child1>

事实上我并不完全理解为什么不意味着我想我不太喜欢插值在Angular 2中的工作方式。

你能解释为什么我可以做一个（用图像标签）而不用另一个吗？

Answer 1

我认为myHero是一个对象。 {{}}用于字符串插值，这意味着结果始终是字符串。您的myHero可能会以'[object Object]'传递。

[hero]="myHero"

将myHero作为对象传递，<app-child>将不加收到。

在前一个带有src属性的示例中，它无关紧要，因为无论如何它都是一个字符串。

Answer 2

你需要引用：

<app-child hero="{{myHero}}"></app-child1>

这是plunker

确切地说：

更一般地说，大括号之间的材质是Angular首先计算的模板表达式，然后转换为字符串。

因此，这意味着您无法通过插值将类或函数传递给另一方，否则您将获得字符串化版本。