angular2 中使用的 `[()]` 语法是什么？答案

【问题标题】：What is `[()]` syntax used for in angular2?angular2 中使用的 `[()]` 语法是什么？
【发布时间】：2016-04-07 22:15:31
【问题描述】：

我知道我们使用

() 用于检测类似事件

 <div (click)="doSomething()">

或

 <div (blur)="doSomethingElse()">

和{{}} 用于将变量转换为模板中的字符串，如

<div>{{a_variable_i_want_to_show}}</div>

但是，除了 ng-model 中的两种方式绑定之外，我们还使用 [()] 做什么？

有通用用法吗？

【问题讨论】：

【解决方案1】：

这是双向绑定。查看他们的cheatsheet：

设置双向数据绑定。相当于：<my-cmp [title]="name" (titleChange)="name=$event">

【讨论】：

【解决方案2】：

当与 NgModel 一起使用时，[()] 在组件属性和 DOM 表单元素之间设置双向数据绑定。我们对组件属性所做的任何更改都会自动传播到 DOM，而我们对表单元素（即 DOM）所做的任何更改都会自动传播到组件属性。

当与组件一起使用时，[()] 在父组件属性和子组件属性之间设置双向数据绑定。我们对父组件属性所做的任何更改都会自动传播到 DOM。但是，我们对子组件属性所做的任何更改不会自动传播到父组件——我们必须使用emit()。所以它和 NgModel 有点不同。

子组件必须定义一个输入属性和一个输出属性，即EventEmitter。如果输入属性命名为x，则输出属性必须命名为xChange。子组件必须通过调用 xChange.emit(newValue) 显式发出对 x 的任何更改。

之所以有命名要求是因为[(childProp)]="parentProp"是[childProp]="parentProp" (childPropChange)="parentProp=$event"的简写。

如果您需要在子级发出新值时在父级中执行某些逻辑，则需要使用扩展形式：[childProp]="parentProp" (childPropChange)="doSomething($event)"。

【讨论】：