角度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>

{{}}(称为插值)和[](称为属性绑定)均表示对角度的理解，即从数据源到查看目标之间存在单向.

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

For more visit www.codementor.io

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