代码之家 › 专栏 › 技术社区 › Deadpool

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

ngmodel angular javascript

2

Deadpool · 技术社区 · 8 年前

根据角度文件,角度指令有三种类型:

一。组件

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

2.结构指令

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

三。属性指令

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

现在,我的问题是 [(ngmodel)] 是一个指令,但我很困惑,因为它似乎不属于上述三类(根据官方文件),没有第四类!那么,有人能指出什么样的指令是[(ngModel)]?

3 回复 | 直到 8 年前

1

Zircon 8 年前

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

这个 doc 对于 下一代模型 显示其选择器是 [ngModel]... ,这意味着它作为属性应用于(几乎)DOM中的任何元素。

你链接的官方文章总结了三个类别:

带有模板的组件指令。

结构指令–通过添加和删除DOM元素来更改DOM布局。

属性指令更改元素、组件或其他指令的外观或行为。

当你把 [(ngModel)] 在元素上,通过将输入和输出与其关联来修改其行为(请参见@JensHabegger的答案)“盒子里的香蕉”是用于双向绑定的语法糖,详细说明了 here 是的。实际上,你在申请 [ngModel] 使用输入,然后根据其输出自动修改值。

像这样的, 下一代模型 绝对是一个属性指令。

2

1

Julius DzidzeviÄius 8 年前

[(NgModel)] 是与事件侦听器组合的属性指令。这个 [(NgModel)] 是:

[ngModel]="variable" (ngModelChange)="variable = $event" 是的。如你所见,在幕后它隐藏了一些类似于eventemitter的东西。所以它绑定 variable 同时监听模板和模型中的更改事件。

3

1

Jens Habegger 8 年前

[(ngmodel)]是angular使用的一个“方便”指令,它通过组合属性指令和事件侦听器来简化双向绑定。它实际上不属于您提到的任何指令组,但它也不是自己的组。

使用 @Directive Decorator ,您还可以创建自己的指令,角度文档提供的类型可能是为了简化进入角度(或者在你的情况下,提供潜在的混乱;-))