根据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)]是哪种指令?
答案 0 :(得分:1)
[(ngModel)]是Angular使用的“便捷”指令,通过组合属性指令和事件侦听器来简化双向绑定。它实际上并不属于您提到的任何指令组,但它也不是其自身的组。
使用@Directive Decorator,您还可以创建自己的指令,Angular Documentation提供的类型可能是为了简化进入Angular的过程(..或者在您的情况下,可能会造成混淆;-) )
答案 1 :(得分:1)
[(NgModel)]
是与事件侦听器组合的属性指令。此[(NgModel)]
是以下内容的缩写:
[ngModel]="variable" (ngModelChange)="variable = $event"
。如您所见,它在幕后隐藏了类似于EventEmitter的东西。因此,它将variable
绑定到模板,并且还监听模板和模型中的更改事件。
答案 2 :(得分:1)
NgModel
是属性指令。它作为属性应用于(几乎)DOM中的任何元素。
NgModel
的{{3}}表明它的选择器是[ngModel]...
,这意味着它作为属性应用于(几乎)DOM中的任何元素。
您链接的官方文章总结了三个类别:
Components —带有模板的指令。
结构指令-通过添加和删除DOM元素来更改DOM布局。
属性指令-更改元素,组件或其他指令的外观或行为。
将[(ngModel)]
放在元素上时,您正在通过将输入和输出与元素相关联来修改其行为(请参见@JensHabegger的回答)。 “盒子里的香蕉”是用于双向绑定的语法糖,详细说明doc。本质上,您将[ngModel]
与输入配合使用,然后根据其输出自动修改值。
因此,NgModel
绝对是属性指令。