Angular 2：带括号和不带括号的属性绑定之间的区别？

Question

我注意到可以在没有括号的情况下对内容进行属性绑定。有什么区别？

打字稿：

import { Component, Input } from '@angular/core';

@Component( {
    selector: 'my-comp',
    templateUrl: `
    input is {{foo}}
  `

})
export class myComponent {
    @Input() public foo: string;

    constructor() { }
    }

HTML：

案例 1

<my-comp [foo]="bar"></my-comp>

案例 2

<my-comp foo="bar"></my-comp>

Answer 1

有一个很小的，也许不重要的情况，但在某些情况下，你错过它可能会很烦人。

数字

---

案例 1

<my-comp [foo]="90"></my-comp>

案例 2

<my-comp foo="90"></my-comp>

案例一： typeof foo => 'number'

案例2： typeof foo => 'string'

布尔值

---

案例 3

<my-comp [foo]="true"></my-comp>

案例 4

<my-comp foo="true"></my-comp>

案例3：typeof foo => 'boolean'

案例4： typeof foo => 'string'

Answer 2

一般来说，我们可以说只有当我们有一个固定的字符串属性时才应该使用不带括号的绑定：

来自docs：

当满足以下所有条件时，您应该省略括号：

1. 目标属性接受字符串值。
2. 字符串是一个固定值，您可以将其烘焙到模板中。
3. 这个初始值永远不会改变。

您在标准 HTML 中通常以这种方式初始化属性，并且它 也适用于指令和组件属性 初始化。

将元素属性设置为非字符串数据值时，您必须 使用属性绑定。

总而言之，这意味着右边的值只有在使用括号时才会被解释。只要看到右侧引号中的引号，您就可以删除括号：[anyStringProperty]="'hello'" 可以更改为 anyStringProperty = "hello"。

因此，只要我们在传递字符串时也省略双引号之间的单引号，就可以不使用方括号进行属性绑定。

Answer 3

来自文档 - Remember the brackets：

括号 [] 告诉 Angular 评估模板表达式。如果省略括号，Angular 会将字符串视为常量并使用该字符串初始化目标属性。

Answer 4

以下是所有情况的简要说明：

当您使用方括号时，右侧是一个表达式。当你完全不使用括号时，右手边是一个常数。

所以会将“常量”字符串分配给 my-tag 的输入。要使用方括号达到相同的效果：注意里面的单引号。如果您没有在此处添加单引号，则 my-tag 的输入将绑定到其父组件（您编写此模板的位置）属性或名为“constant”的模板变量（例如 ngFor 的 let-constant）。

在此处填写What is the difference between property binding and just a regular attribute

Answer 5

在某些情况下，我们可能需要像这样动态添加 html 属性，以及来自 api 请求的 json 示例

案例 1 [] 称为属性绑定

<my-comp [foo]="data.bar"></my-comp>

案例 2 {{ }} 称为插值

<my-comp foo="{{data.bar}}"></my-comp>

案例3条件处理

<my-comp [attr.foo]="data.bar ? true : false"></my-comp>

{{ }} 称为 Interpolation 和 [] 称为 Property Binding 都意味着角度理解从数据源到视图目标的方式是单向的。

更多信息请访问www.codementor.io