Question

我在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>

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

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

提前致谢！

Answer 1

如果您使用的是[]，则表示它包含表达式。这是对象绑定到Angular组件或指令的属性(@Input()或DOM元素的属性

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

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

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

找到

Answer 2

使用属性名称可以直接读取引号中的内容。 header="Title Name"会将"Title Name"传递到标头属性。

在属性名周围使用[]可以引用变量或函数。在您的班级中[header]="TitleName"或TitleName() {return "Title Name"}的{{1}}组件文件

与Angular组件属性绑定混淆

2 个答案: