Angular

Question

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

编辑： 在玩弄并查看@Rohan Fating 给出的文档片段后，我意识到像 (ngModel) 这样的东西应该有一个声明，而不是一个表达。话虽这么说，是否会有合适的时间使用 (ngModel) 之类的东西，或者它甚至可以在任何情况下工作？

Answer 1

[( in Angular 表示双向数据绑定。从理论上讲，您只能绑定到一个事件 ((ngModel)) 或一个值 ([ngModel])。这使您能够以不同于即将发生的变化的方式处理发生的变化。使用 Angular 2，您就拥有了这种灵活性。

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

笨蛋 link：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 2

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

Answer 3

此语法：

[(ngModel)]="expression"

被编译器解包为

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

这意味着：

有一个应用于元素（输入）的 ngModel 指令
这个通过 ngModel 绑定的 ngModel 指令采用 expression 参数
有输出（事件）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指令class作为一个指令。但是，由于它没有通过 [...] 语法定义的任何输入绑定，因此在更改检测期间将跳过该指令。而且由于事件 ngModel 也没有为 ngModel 指令定义，所以使用 (ngModel) 将没有副作用并且没有意义。

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

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

angular2-template

angular2-ngmodel