与 Angular 组件属性绑定混淆答案

【问题标题】：Confusion with Angular component property binding与 Angular 组件属性绑定混淆
【发布时间】：2018-02-15 19:48:52
【问题描述】：

我在 Angular 5 应用程序上使用 PrimeNG UI 组件，我对它们将值绑定到它们的某些属性的方式有点困惑。我会用一个例子来解释它：

根据文档 (https://www.primefaces.org/primeng/#/accordion)，这些是 AccordionTab 的属性：

Name       Type     Default   Description
header     string   null      Title of the tab.
selected   boolean  false     Defines if the tab is active.
disabled   boolean  false     Defines whether the tab can be selected

然后，在代码中，我们有以下示例：

<p-accordion>
  <p-accordionTab header="Header 1" [selected]="true">
    Content 1
  </p-accordionTab>
  <p-accordionTab header="Header 2">
    Content 2
  </p-accordionTab>
  <p-accordionTab header="Header 3">
    Content 3    
  </p-accordionTab>
</p-accordion>

如您所见，header 使用时不带括号，而 selected 确实使用它们。如果我错了，请纠正我，但是括号用于将值绑定到组件属性，而没有括号的文字是指指令，对吗？

为什么在这种情况下它们的使用方式不同？

提前致谢！

【问题讨论】：

标签： angular primeng

【解决方案1】：

如果您使用[]，这意味着它包含一个表达式。这是为了将对象绑定到 Angular 组件或指令的属性 (@Input() 或 DOM 元素的属性

这里[selected]="true" 将获得值true 而不是"true"。这意味着您还可以在此处传递数组、变量...以及其他复杂的表达式。

header 中的内容始终是字符串值。

更多细节可以在这里找到https://angular.io/guide/template-syntax

【讨论】：

或者如果他愿意，他可以传递 [header]="foo"，其中 foo 是存储在组件中的变量。
@BoantaIonut 是的。
我的回答中已经解释过了
@mast3rd3mon 很高兴它有帮助。请投票并标记答案正确！

【解决方案2】：

单独使用属性名称会按字面意思读取引号中的内容。 header="Title Name" 会将 "Title Name" 传递到 header 属性中。

在属性名周围使用[] 允许您引用变量或函数。 [header]="TitleName" 和 TitleName() {return "Title Name"} 或 TitleName = "Title Name" 在组件文件中的类中

【讨论】：