将值插值为属性Component

Question

我有一个问题，关于Angular2中的插值是如何完成的。 例如，我有组件X，其值为@Input（）; 在父组件中我有这样的代码：

<X [value]="{{'hello' | translate}} {{ 'world' | translate }}"></X>

但是我可以判断这样的代码是错误的。 我使用ng2-translate进行国际化。 你可以通过信息链接向我提供帮助吗？

Answer 1

如果您在子组件中定义了@Input() some，则有4个选项：

1. 不要传递任何内容 - 输入将是未定义的

<child-component ... - 表达式将被解析为未定义，this.some将等于未定义

1. 既不使用插值也不使用绑定语法 -

<child-component some="value" ... - 表达式将被解析为字符串，this.some将等于value字符串;

1. 使用插值 - <child-component some="{{value}}"...>
2. 使用绑定语法 - <child-component [some]="value"...>

第3和第4选项都将在组件工厂中生成完全相同的updateBindings function。表达式将在父组件的上下文中进行计算，无论父组件的this.some属性如何，输入value都将相等。

在Template Syntax manual中阅读更多内容。

在您的情况下，插值似乎可以正常运行：

<X value="{{'hello' | translate}} {{ 'world' | translate }}"></X>

Answer 2

在Angular中，您从不一起使用[]和“{{}}”。无论是其中一个。

<X value="{{'hello' | translate}} {{ 'world' | translate }}"></X>

或

<X [value]="('hello' | translate) + ' ' + ('world' | translate)"></X>