Angular 1不接受onchange()
事件,它只接受ng-change()
事件。
另一方面,Angular 2同时接受(change)
和(ngModelChange)
事件,这两个事件似乎在做同样的事情。
有什么区别呢?
哪一个对性能最好?
ngModelChange。
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
vs change:
<input type="text" pInputText class="ui-widget ui-text"
(change)="clearFilter()" placeholder="Find"/>
(change)
事件绑定到经典的输入变化事件。
https://developer.mozilla.org/en-US/docs/Web/Events/change
你可以使用(change)事件,即使你的输入没有模型,因为
<input (change)="somethingChanged()">
(ngModelChange)
是ngModel指令的@Output
。当模型发生变化时,它就会触发。没有ngModel指令,你不能使用这个事件。
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124
正如你在源代码中发现的那样,(ngModelChange)
会发出新的值。
https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169
所以这意味着你有这样的使用能力。
<input (ngModelChange)="modelChanged($event)">
modelChanged(newObj) {
// do something with new value
}
基本上,两者之间似乎没有什么大的区别,但当你使用"[ngValue]"时,"ngModel "事件获得了权力。
<select [(ngModel)]="data" (ngModelChange)="dataChanged($event)" name="data">
<option *ngFor="let currentData of allData" [ngValue]="currentData">
{{data.name}}
</option>
</select>
dataChanged(newObj) {
// here comes the object as parameter
}
假设你在没有"ngModel
的情况下尝试同样的事情"。
<select (change)="changed($event)">
<option *ngFor="let currentData of allData" [value]="currentData.id">
{{data.name}}
</option>
</select>
changed(e){
// event comes as parameter, you'll have to find selectedData manually
// by using e.target.data
}
正如我在另一个主题中发现和写到的那样--这适用于angular < 7(不确定在7+中是如何的)。
只是为了将来
我们需要注意,[(ngModel)]="hero.name"只是一个捷径,可以去粗取精。[ngModel]="hero.name"(ngModelChange)="hero.name = $event"。
因此,如果我们对代码进行去糖化,我们最终会得到。
<选择(ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event" >
或
<[ngModel]="hero.name" (ngModelChange)="hero.name=$event" 选择(ngModelChange)="onModelChange()">
如果你检查上面的代码,你会注意到我们最终有2个ngModelChange事件,这些事件需要按照一定的顺序执行。
总结一下。**如果你把ngModelChange放在ngModel之前,你会得到$event作为新的值,但你的模型对象仍然保持以前的值。 如果你把它放在ngModel之后,模型将已经有了新的值。