如何将字符串值传递给angular2中的组件

85

我想将字符串值传递给angular2中的组件，但是它不适用于默认绑定。我在想类似的东西：

<component [inputField]="string"></component>

不幸的是，赋值的右侧仅允许使用表达式。有没有办法做到这一点？

angular angular2-template

— 安德拉斯·哈特瓦尼（Andras Hatvani）
source

173

字符串文字可以通过不同的方式传递：

<component inputField="string"></component>
<component [inputField]="'string'"></component>
<component inputField="{{'string'}}"></component>

— 贡特·佐赫鲍尔（GünterZöchbauer）
source

1

两者之间有什么区别吗？例如，在过去两种情况下Angular会创建“绑定”还是足够聪明？

— 亚历山大·阿巴库莫夫

Angular足够聪明。在DOM中只有第一个可见。

— 君特Zöchbauer

1

谢谢。我传递时没有嵌套的引号，它返回的值为NaN： <component [inputField]='string'></component>

— Eric Soyke

从技术上讲，我不会建议选项1和3。这实际上是指组件元素上的那些属性和值，以及组件中可能利用这些值的任何元素。在示例中，id="example-id"将传递所需的正确字符串，但是，现在将有2个具有相同id属性的元素。明智地使用此方法...

— mrtpain

50

您可以通过将字符串用引号引起来来传递字符串

<component [inputField]="'string'"></component>

— 埃里克·马丁内斯（Eric Martinez）
source

3

要在字符串文字中包含单引号（以及可能的其他特殊HTML字符），第一个选项有效，而那些使用单引号包装文字的解析器将失败，并出现解析错误。例如：

<component inputField="John&#39;s Value"></component>

将正确输出“约翰的价值”。

— 格伦
source