33

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

打字稿：

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>
4

5 回答 5

35

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

从文档：

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

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

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

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

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

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

于 2018-01-22T09:50:57.533 回答
8

在某些情况下，我们可能需要像这样动态添加 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

于 2017-03-23T13:21:45.943 回答
5

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

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

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

在这里形成属性绑定和只是一个常规属性有什么区别

于 2019-05-18T07:24:56.977 回答
3

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

数字

情况1

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

案例2

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

情况1： typeof foo => 'number'

案例二： 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'

于 2020-11-17T13:25:06.637 回答
2

来自 Docs -记住括号：

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

于 2020-05-09T15:19:55.883 回答