角- [ (ngModel) ] vs [ngModel] vs (NgModel)

Question

我目前了解到[(ngModel)]="expression"是从组件到视图的双向绑定，反之亦然。我还理解[ngModel]="expression"是单向绑定的(我相信从组件到视图？)还有可能出现(ngModel)="expression"。我对[ngModel]和(ngModel)之间的区别感到困惑。谁能解释一下吗？

编辑：在玩了一遍之后，查看了@Rohan给出的文档片段，我意识到像(ngModel)这样的东西应该使用语句，而不是表达式。尽管如此，是否有合适的时间使用类似(ngModel)之类的东西，或者在任何情况下都能工作呢？

Answer 1

这个语法：

[(ngModel)]="expression"

由编译器解压缩为

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

这意味着：

1. 有一个ngModel指令应用于元素(输入)
2. 这个通过ngModel绑定的ngModel指令接受expression参数
3. 有一个输出(事件) ngModelChange

现在您可以看到，[ngModel]部件总是在那里，正如您所注意到的，它将向下同步值。

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

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;
}

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

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

因此角也会将ngModel指令类初始化为指令。但是，由于它没有通过[...]语法定义的任何输入绑定，因此在检测更改时将跳过该指令。而且，由于事件ngModel不是为ngModel指令定义的，所以使用(ngModel)没有副作用，而且没有意义。

Answer 2

​

角度上的[(是双向数据绑定的信号.理论上，您只能绑定到事件((ngModel))或值([ngModel])。这使您能够以与即将发生的更改不同的方式处理正在进行的更改。有了角度2，你就有了这个灵活性。

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

柱塞连接：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 ) is双向绑定(NgModel)是单向绑定到组件的视图，ngModel是单向绑定组件到视图的方式。