Angular - [(ngModel)] vs [ngModel] vs (ngModel)

Question

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

编辑： 在玩弄并查看了@Rohan Fating 提供的文档 sn-p 之后，我意识到像 (ngModel) 这样的东西应该采用语句，而不是表达式。话虽如此，是否有合适的时间使用 (ngModel) 之类的东西，或者在任何情况下都可以使用？

Answer 1

这个语法：

[(ngModel)]="expression"

被编译器解包成

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

意思是：

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

现在您可以看到 [ngModel] 部分始终存在，正如您所指出的，它将同步值。

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

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])'

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

Answer 2

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

Answer 3

[( 在 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;
  }

}