Angular 1不接受onchange()
事件,它只接受ng-change()
事件。
另一方面,Angular 2接受(change)
和(ngModelChange)
事件,这两者似乎在做同一件事。
有什么不同吗?
哪一个性能最好?
NGModelChange:
<input type="text" pInputText class="ui-widget ui-text"
(ngModelChange)="clearFilter()" placeholder="Find"/>
vs变化:
<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
}
基本上,两者之间似乎没有很大的区别,但是NGModel
事件在使用[ngValue]
时获得了强大的功能。
<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
}