角度-[[（ngModel）] vs [ngModel] vs（ngModel）

Question

我目前了解这[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我也理解这[ngModel]="expression"是一种单向绑定（我相信从组件到视图？）。然后有可能(ngModel)="expression"。我[ngModel]对VS 之间的区别感到困惑(ngModel)。有人可以解释一下吗？

编辑：经过研究，并回顾了@Rohan Fating给出的文档片段后，我意识到类似的东西(ngModel)应该带有一个声明，而不是一个表达式。话虽这么说，是否会有适当的时间使用类似的东西，(ngModel)或者在任何情况下都可以使用？

Answer 1

这个语法：

[(ngModel)]="expression"

被编译器解包到

[ngModel]="expression" (ngModelChanged)="expression=$event"

意思是：

1. 有一个ngModel指令应用于元素（输入）
2. 通过ngModel绑定的此ngModel指令采用expression参数
3. 有一个输出（事件） ngModelChanged

现在，您可以看到该[ngModel]部分始终存在，如您所述，它将向下同步值。

指定时会发生什么(ngModel)="c()"有趣的事情。通常，(...)语法用于事件。因此，确实Angular将其识别为事件，并在组件视图工厂中创建了适当的侦听器：

function (_v, en, $event) {
    var ad = true;
    var _co = _v.component;
    ...
    if (('ngModel' === en)) {
        var pd_4 = (_co.c() !== false);
        ad = (pd_4 && ad);
    }
    return ad;
}

但是，所有(...)元素也都被解析为attribute，因此它将与ngModel指令选择器匹配：

selector: '[ngModel]:not([formControlName]):not([formControl])'

因此Angular也会将ngModel指令类初始化为指令。但是，由于它没有通过[...]语法定义的任何输入绑定，因此在更改检测期间将跳过此伪指令。并且由于也ngModel未为ngModel指令定义事件，因此用法(ngModel)将没有副作用并且是没有意义的。

Answer 2

[(在 Angular 中发出双向数据绑定的信号。理论上，您只能绑定到事件 ( (ngModel)) 或值 ( [ngModel])。这使您能够以与即将发生的更改不同的方式处理发生的更改。使用 Angular 2，您就拥有了这种灵活性。

您需要像我在下面所做的那样 ngModelChange 事件和更新值

Plunker 链接：https ://plnkr.co/edit/RZMgM69doSHGBG1l16Qf ? p = preview

@Component({
  selector: 'my-app',
  template: `
    <div>
    <input [ngModel]='value' (ngModelChange)='setModel($event)'/>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  value: string = '';
  constructor() {
    this.name = `Angular! v${VERSION.full}`
  }

  setModel(value) {
    this.value = value;
  }

}

Answer 3

[(ngModel)] 是两种方式绑定 (NgModel) 是将视图绑定到组件的一种方式 [ngModel] 是将组件绑定到视图的一种方式