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

Question

我目前理解 [(ngModel)]="expression" 是从组件到 View 的双向绑定(bind)，反之亦然。我也明白 [ngModel]="expression" 是单向绑定(bind)(我相信从组件到 View ？)。然后就有了 (ngModel)="expression" 的可能性。我最困惑的是 [ngModel] 与 (ngModel) 之间的区别。有人可以解释一下吗？

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

Answer 1

此语法:

[(ngModel)]="expression"

被编译器解包成

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

这意味着:

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