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

Question

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

组件
结构
属性

根据以下官方link：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)] 是 Angular 使用的 'convenience' 指令，通过组合属性指令和事件侦听器来简化双向绑定。它实际上并不属于您提到的任何指令组，但它也不属于自己的组。

使用 @Directive Decorator，您还可以创建自己的指令，Angular 文档提供的类型可能旨在简化进入 Angular（.. 或您的情况可能会造成混淆 ;-) )

Answer 2

[(NgModel)] 是与事件侦听器结合的属性指令。此 [(NgModel)] 是 shorthand 的：

[ngModel]="variable" (ngModelChange)="variable = $event"。如您所见，它在幕后隐藏了类似于 EventEmitter 的东西。因此它将 variable 绑定到模板，并同时监听模板和模型中的更改事件。

Answer 3

NgModel 是一个 属性指令 。它作为属性应用于（几乎）您的 DOM.

中的任何元素

NgModel 的 doc 显示其选择器是 [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 的回答）。 “盒子里的香蕉”是双向绑定的语法糖，详细说明here。本质上，您是将 [ngModel] 与输入一起应用，然后根据其输出自动修改值。

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

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

Confused as [(ngModel)] doesn't fall in any of the Directive Categories in Angular4

javascript

ngmodel

angular