[] 和 {{}} 之间将状态绑定到属性的区别

Question

下面是一个模板示例：

<span count="{{currentCount}}"></span>
<span [count]="currentCount"></span>

在这里，他们俩都做同样的事情。哪一个是首选，为什么？

Answer 1

[]用于从父组件中的值绑定到子组件中的@Input()。它允许传递对象。

{{}}用于绑定属性和 HTML 中的字符串，例如

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div>

其中绑定可以是字符串的一部分。

()用于绑定要在触发 DOM 事件或子组件上的EventEmitter发出事件时调用的事件处理程序

@Component({
    selector: 'child-comp',
    template: `
    <h1>{{title}}</h1>
    <button (click)="notifyParent()">notify</button>
    `,
})
export class ChildComponent {
  @Output() notify = new EventEmitter();
  @Input() title;
  notifyParent() {
    this.notify.emit('Some notification');
  }
}

@Component({
    selector: 'my-app',
    directives: [ChildComponent]
    template: `
    <h1>Hello</h1>
    <child-comp [title]="childTitle" (notify)="onNotification($event)"></child-comp>
    <div>note from child: {{notification}}</div>
    `,
})
export class AppComponent {
  childTitle = "I'm the child";
  onNotification(event) {
    this.notification = event;
  }
}

普伦克示例

更多详情请见 https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

Answer 2

字符串插值和属性绑定之间的区别：

主要要理解如下：

插值是一种特殊语法，Angular 将其转换为属性 捆绑。它是属性绑定的便捷替代方法。

这意味着在引擎盖下它会产生类似的结果。但是，字符串插值有一个重要的限制。这是字符串插值中的所有内容都将首先被评估（尝试从模型 ts 文件中查找一个值）：

• 如果在那里找不到此值，则字符串插值中的值将被计算为字符串。
• 如果在模型中找到此值，则找到的值将被强制转换为字符串并使用。

这对如何使用这两种方法有一些影响。例如：

字符串

1. 串联与字符串插值：

     <img src=' https://angular.io/{{imagePath}}'/>
   

字符串

2. 内插不能用于字符串以外的任何内容

     <myComponent  [myInput]="myObject"></myComponent>
   

当myInput是myComponent的@Input()并且我们想要传入一个对象时，我们必须使用属性绑定。如果我们要使用字符串插值，则对象将变成字符串，并将其作为myInput的值传入。

Answer 3

:)战斗结束后我来得有点晚，但是，在我的理解中，还有另一个区别有时可能非常重要。

顾名思义，"属性绑定"意味着你绑定到HTML元素"

object"的属性（对应于它在DOM中的"客观"表示），这与字符串插值不同，字符串插值可以应用于HTML元素标签属性，这就是为什么你只能将字符串放入其中的原因， 当您与未解析/可解析的实体交谈时。

很多时候，两者之间有直接的对应关系（html中的标签有一个foo属性，它链接到DOM对象的foo属性），但这不是规则，你可以有不链接到属性的属性，反之亦然。

顺便说一下，你在堆栈溢出中有一个非常好的答案，它深刻解释了两者之间的区别：HTML 中的属性和属性有什么区别？