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

问题描述

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

在玩弄并查看@Rohan Fating 提供的文档片段后，我意识到像 (ngModel) 之类的东西应该采用声明，而不是表达.话虽如此，是否有合适的时间使用诸如 (ngModel) 之类的东西，或者在任何情况下都可以使用?

解决方案

此语法:

[(ngModel)]="表达式"

被编译器解包成

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

意思是:

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

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

当您指定 (ngModel)="c()" 时会发生什么很有趣.通常，(...) 语法用于事件.所以确实 Angular 将其识别为事件并在 组件视图工厂:

function (_v, en, $event) {var 广告 = 真;var _co = _v.component;...if (('ngModel' === en)) {var pd_4 = (_co.c() !== false);广告 = (pd_4 && 广告);}返回广告；}

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

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

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

I currently understand that [(ngModel)]="expression" is two-way binding from component to view and vice versa. I also understand that [ngModel]="expression" is one-way binding (I believe from component to view?). Then there's the possibility of (ngModel)="expression". I am mostly confused as to the differences between [ngModel] vs (ngModel). Could someone please explain?

EDIT: After playing around with, and reviewing the document snippet given by @Rohan Fating I realized that something like (ngModel) should take a statement, rather than an expression. That being said, would there ever be an appropriate time to use something like (ngModel) or would that even work in any circumstance?

解决方案

This syntax:

[(ngModel)]="expression"

is unwrapped by the compiler into

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

which means:

1. there's a ngModel directive applied to an element (input)
2. this ngModel directive through ngModel binding takes the expression parameter
3. there's an output (event) ngModelChanged

Now you can see that [ngModel] part is always there which as you noted will sync values down.

What happens when you specify (ngModel)="c()" is interesting. Normally, the (...) syntax is for events. So indeed Angular recognizes this as event and create appropriate listener in the 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;
}

However, all (...) elements are also parsed as attributes, and so it will match the ngModel directive selector:

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

so Angular will also initialize the ngModel directive class as a directive. However, since it doesn't have any input bindings defined through [...] syntax this directive will be skipped during change detection. And since also the event ngModel is not defined for the ngModel directive the usage (ngModel) will have no side effects and is meaningless.

这篇关于Angular - [(ngModel)] vs [ngModel] vs (ngModel)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！