javascript - 混淆为 [(ngModel)] 不属于 Angular4 中的任何指令类别

Question

根据 Angular 文档，Angular 的指令有 3 种类型:

• 组件
• 结构化
• 属性

根据以下官方链接:https://angular.io/guide/attribute-directives#directives-overview

<强>1。组件

<home></home>
<about-us></about-us>
<support></support>

<强>2。结构指令

<div *ngIf="age < 18"> ... </div>
<div *ngFor="let x of students"> ... </div>

<强>3。属性指令

<div [ngClass]="red"> ... </div>
<div [ngStyle]="{'background':colorValue}> ... </div> 

现在，我的问题是 [(ngModel)] 是一个指令，但我很困惑，因为它似乎不属于上述 3 个类别中的任何一个(根据官方文档) ，而且没有第四类!那么，有人可以指出 [(ngModel)] 是什么样的指令吗？

Answer 1

NgModel 是一个属性指令。它作为属性应用于(几乎)DOM 中的任何元素。

doc对于 NgModel 显示它的选择器是 [ngModel]...，这意味着它作为属性应用于(几乎)DOM 中的任何元素。

您链接的官方文章总结了三类:

Components — directives with a template.

Structural directives — change the DOM layout by adding and removing DOM elements.

Attribute directives — change the appearance or behavior of an element, component, or another directive.

当您将 [(ngModel)] 放在一个元素上时，您通过将输入和输出与其相关联来修改其行为(请参阅@JensHabegger 的回答)。 “盒子里的香蕉”是双向绑定(bind)的语法糖，详解here .本质上，您是将 [ngModel] 与输入一起应用，然后根据其输出自动修改值。

因此，NgModel 绝对是一个属性指令。