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

Question

我目前了解到，[(ngModel)]="expression" 是从组件到视图以及视图到组件的双向绑定。我也理解 [ngModel]="expression" 是单向绑定 (我相信是从组件到视图?)。然后还有可能会出现 (ngModel)="expression"。我主要对 [ngModel] 和 (ngModel) 之间的区别感到困惑。请问是否有人可以解释一下？

编辑: 在尝试和回顾@Rohan Fating给出的文档片段后，我意识到像 (ngModel) 这样的东西应该采用语句而不是表达式。话虽如此，是否存在适当使用类似 (ngModel) 的情况，或者在任何情况下都可以使用？

- mbucks

---

这是单向绑定向另一个方向进行的。 - Plog

嘿，关于我的回答有什么不清楚的地方吗？ - Max Koretskyi

不，谢谢你的解释。那正是我想知道的！ - mbucks

@mbucks，太棒了，祝你好运 - Max Koretskyi

Answer 1

这个语法：

[(ngModel)]="expression"

编译器将其展开为

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

这意味着：

1. 一个ngModel指令被应用到了一个元素（input）上
2. 这个ngModel通过ngModel绑定接受了表达式参数
3. 有一个输出（事件）ngModelChange

现在你可以看到，[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;
}

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

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

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

- courses.indepth.dev

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

}

- Rohan Fating

---

那么(ngModel)被认为是一个事件绑定吗？这意味着用户输入数据，我想读取他们输入的内容？而如果我使用[ngModel]，我只想改变用户看到的值，但他们不能影响该值？ - mbucks

已添加屏幕截图，您可以从angular.io中参考此链接：https://angular.io/guide/template-syntax#binding-syntax-an-overview - Rohan Fating

在测试了(ngModel)="expression"之后，我意识到它没有将输入的值添加到我的组件模型中。这是因为ngModel不被认为是一个事件吗？ - mbucks

我的问题并不一定与绑定有关，更多的是关于[ngModel]和(mgModel)的具体区别。(ngModel)是否有效？ - mbucks

更新了带有代码的答案，ngModelChange事件需要绑定事件绑定，但[ngModel]应始终存在。模型更改将需要在输入更改时执行某些操作。 - Rohan Fating

Answer 3

[(ngModel)]代表双向绑定。 (NgModel)代表单向绑定，从视图到组件。 [ngModel]代表单向绑定，从组件到视图。

- Cherifa GHERSI

---

我在上面编辑了我的问题。我尝试使用(ngModel)="exampleObj.foo"，但意识到它不像我期望的那样绑定到组件上的对象。 - mbucks