Angular 2:带括号和不带括号的属性绑定之间的区别? [英] Angular 2: Difference between property binding with and without brackets?

问题描述

我注意到可以在没有括号的情况下进行属性绑定.有什么区别?

I noticed it's possible to property bind stuff without brackets. What is the difference?

打字稿:

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>

推荐答案

有些情况我们需要动态添加这样的 html 属性可能是来自 api 请求的 json 的示例

There are some Cases where we need to add like this html attributes dynamically might be and example which comes json from api request

案例 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 意味着 angular 都知道从数据源到查看目标是单向的.

Both {{ }} called as Interpolation and [] called as Property Binding means angular understand that there is One-way from data source to view target.

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

这篇关于Angular 2:带括号和不带括号的属性绑定之间的区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！