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

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

来自docs：

如果满足以下所有条件，则应省略括号：


目标属性接受字符串值。

该字符串是一个固定值，您可以将其烘焙到模板中。

这个初始值永远不会改变。

您可以在标准HTML中以这种方式定期初始化属性   同样适用于指令和组件属性   初始化。

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

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

Answer 2

有些情况我们需要动态添加这样的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>

两个{{}}称为插值，[]称为属性绑定，意味着角度理解从数据源到视图目标的单向。

更多访问www.codementor.io

Answer 3

从文档-Remember the brackets：

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

Answer 4

情况很小，也许并不重要，但是在某些情况下，您错过它可能会很烦人。

编号

案例1

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

案例2

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

案例1： 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 5

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

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

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

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

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

5 个答案:

编号

布尔值