[参数] =“值”和参数 =“值”之间的角度差异 [重复]答案

【问题标题】：Angular difference between [parameter]="value" and parameter="value" [duplicate][参数] =“值”和参数 =“值”之间的角度差异 [重复]
【发布时间】：2020-06-05 17:30:22
【问题描述】：

我正在使用 Angular 材料，但遇到以下问题。

在示例here 中，您可以使用以下代码更改背景：

<mat-tab-group [backgroundColor]="backgroundColorToggle.value">

但对我来说，它不起作用。顺便说一句，我没有使用变量，而只是一个字符串：

<mat-tab-group [backgroundColor]="primary">

最后，我尝试了以下方法并且成功了：

<mat-tab-group backgroundColor="primary">

在我自己的组件中，作为输入参数 (@Input()) 我可以同时使用： <app-my-component [input]=..> 和 <app-my-component input=..>

那么[input]="value" 和input="value" 之间的区别是什么，为什么在我的组件中都有效而在 Angular 材料中却没有。

【问题讨论】：

使用[bColor]="color"时称为属性绑定，这里color必须有组件属性..如果我们只是想将字符串传递给then，我们不必使用属性绑定语法在这里使用bColor="blue"，蓝色是简单的字符串。
查看这个帖子stackoverflow.com/questions/43633452/…
感谢大家的帮助。我同意有类似的问题可以帮助我理解

标签： angular angular-material

【解决方案1】：

backgroundColor 是一个需要字符串的输入属性。方括号需要一个属性。

因此语法将是：

<mat-tab-group [backgroundColor]="'primary'">

或者，

<mat-tab-group backgroundColor="primary">

或者，

.ts

primary = 'primary';

.html

<mat-tab-group [backgroundColor]="primary">

【讨论】：

【解决方案2】：

使用方括号将属性绑定到组件中的公共属性。

此示例将尝试在您的组件中应用 primary 属性的值：

component.html

<mat-tab-group [backgroundColor]="primary">
</mat-tab-group>

组件.ts

primary: string = 'red';

而在不使用方括号的情况下执行相同操作会将属性设置为 HTML 中的文字值。

<mat-tab-group backgroundColor="red">
</mat-tab-group>

这两个例子是等价的

【讨论】：

【解决方案3】：

方括号意味着绑定，而省略它们则进行属性分配（还有更多内容，我将在稍后介绍）。如果要进行绑定，引号中的值必须是 JavaScript 表达式。

这一行：

<mat-tab-group backgroundColor="primary">

只需将值“primary”分配给属性backgroundColor。如果值“primary”不存在，则取决于组件如何处理它。

这一行：

<mat-tab-group [backgroundColor]="primary">

绑定到名为primary 的字段。这意味着为了分配属性值，Angular 将寻找一个名为 primary 的字段，读取它的值并分配它。如果名为primary 的字段不存在，它将分配一个值undefined。例如，如果你有这个：

primary = 'red';

那么第二个语句（有绑定）实际上会将“red”的值分配给您的属性，而第一个语句（没有绑定）仍然会分配一个值“primary”。

还有三点需要注意：

您也可以通过省略方括号并使用双括号来进行绑定，例如<mat-tab-group backgroundColor="{{primary}}">。两者是完全等价的，但是方括号的样式大家都比较熟悉，除非你有充分的理由，否则你应该一直使用它。
由于绑定接受 JavaScript 表达式，因此您可以提供的不仅仅是一个简单的字段，例如如果primary 未定义，<mat-tab-group [backgroundColor]="primary || secondary"> 将分配来自secondary 字段的值。此外，<mat-tab-group [backgroundColor]="shade + 'blue'"> 将评估字段 shade 并向其添加值“blue”，根据shade 的值生成“lightblue”或“darkblue”。
如果您要分配的属性是布尔值，那么很容易搞砸它。 <my-comp active="true"> 将文本“true”分配给 active 属性，而 <my-comp [active]="true"> 分配布尔值 true。这可能是您的代码中的一个重要区别，也可能不是。而且由于两者看起来如此相似，我个人已经错过了几个月的错误。可能还有一些潜伏在某个地方。

【讨论】：