[] 和 {{}} 将状态绑定到属性的区别？答案

【问题标题】：Difference between [] and {{}} for binding state to property?[] 和 {{}} 将状态绑定到属性的区别？
【发布时间】：2016-08-20 03:38:15
【问题描述】：

这是一个模板示例：

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

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

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

战斗结束后我来晚了一点:)，但是，在我的理解中，还有另一个区别有时可能非常重要。顾名思义，“属性绑定”意味着您正在绑定到 HTML 元素“对象”的属性（对应于其在 DOM 中的“目标”表示），这与字符串插值，可以应用于 HTML 元素标签 attribute，这就是为什么你只能将字符串放入其中的原因，因为你正在与一个未解析/可解析的实体交谈。

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

顺便说一句，你在堆栈溢出中有一个很好的答案，它深刻地解释了两者之间的区别：What is the difference between properties and attributes in HTML?

【讨论】：

【解决方案2】：

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

主要理解它如下：

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

这意味着在后台会产生类似的结果。然而，字符串插值有一个重要的限制。这是字符串插值中的所有内容都将首先被评估（试图从模型 ts 文件中找到一个值）：

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

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

字符串连接与字符串插值：

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

字符串插值不能用于字符串以外的任何东西
```
  <myComponent  [myInput]="myObject"></myComponent>
```

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

【讨论】：

【解决方案3】：

[] 用于将父组件中的值绑定到子组件中的@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;
  }
}

Plunker example

【讨论】：

我想要 [] 和 {{}} 之间的区别，而不是 [] 和 ()。