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?

Typescript:

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

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

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

    constructor() { }
    }

HTML:

Case 1

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

Case 2

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

回答1:

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

Case 1 [] known as Property Binding

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

Case 2 {{ }} known as Interpolation

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

Case 3 Conditional handling

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

For more visit www.codementor.io

回答2:

In general, we can say that we should use bindings without brackets only when we have a fixed string property:

From the docs:

You should omit the brackets when all of the following are true:

The target property accepts a string value.

The string is a fixed value that you can bake into the template.

This initial value never changes.

You routinely initialize attributes this way in standard HTML, and it works just as well for directive and component property initialization.

When setting an element property to a non-string data value, you must use property binding.

All in all, that means that the value on the right only gets interpreted when using brackets. You can remove the brackets whenever you see quotes in quotes on the right: [anyStringProperty]="'hello'" can be changed to anyStringProperty = "hello"

回答3:

Here is brief description of all situation:

When you use square brackets, the right hand side is an expression. When you use no brackets at all, the right hand side is a constant.

So will assign 'constant' string to my-tag's input. To achieve the same effect with square brackets: notice the single quote inside. If you didn't put single quote there, my-tag's input will be tied to its parent component's (where you write this template) property or template variable (like ngFor's let-constant for example) named "constant".

form here What is the difference between property binding and just a regular attribute

来源：https://stackoverflow.com/questions/42977101/angular-2-difference-between-property-binding-with-and-without-brackets

标签

angular

data-binding

property-binding