(thay đổi) so với (ngModelChange) trong góc

Angular 1 không chấp nhận onchange()sự kiện, nó chỉ chấp nhận ng-change()sự kiện.

Angular 2, mặt khác, chấp nhận cả hai (change)và (ngModelChange)các sự kiện, mà cả hai dường như đang làm điều tương tự.

Có gì khác biệt?

cái nào là tốt nhất cho hiệu suất?

ngModelChange :

<input type="text" pInputText class="ui-widget ui-text"
    (ngModelChange)="clearFilter()" placeholder="Find"/>

vs sự thay đổi :

<input type="text" pInputText class="ui-widget ui-text" 
    (change)="clearFilter()" placeholder="Find"/>

(change) sự kiện ràng buộc với sự kiện thay đổi đầu vào cổ điển.

https://developer.mozilla.org/en-US/docs/Web/Events/change

Bạn có thể sử dụng (thay đổi) sự kiện ngay cả khi bạn không có mô hình ở đầu vào của mình như

<input (change)="somethingChanged()">

(ngModelChange)là @Outputchỉ thị của ngModel. Nó kích hoạt khi mô hình thay đổi. Bạn không thể sử dụng sự kiện này mà không có chỉ thị ngModel.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L124

Khi bạn khám phá thêm trong mã nguồn, (ngModelChange)sẽ phát ra giá trị mới.

https://github.com/angular/angular/blob/master/packages/forms/src/directives/ng_model.ts#L169

Vì vậy, nó có nghĩa là bạn có khả năng sử dụng như vậy:

<input (ngModelChange)="modelChanged($event)">

modelChanged(newObj) {
    // do something with new value
}

Về cơ bản, có vẻ như không có sự khác biệt lớn giữa hai, nhưng ngModelcác sự kiện đạt được sức mạnh khi bạn sử dụng [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
}

giả sử bạn thử điều tương tự mà không có " ngModelđiều"

<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
}

Trong Angular 7, ý (ngModelChange)="eventHandler()"chí sẽ bắn trước khi giá trị bị ràng buộc bị [(ngModel)]="value"thay đổi trong khi ý (change)="eventHandler()"chí sẽ bắn sau khi giá trị bị ràng buộc bị [(ngModel)]="value"thay đổi.

Như tôi đã tìm thấy và viết trong một chủ đề khác - điều này áp dụng cho góc <7 (không chắc nó như thế nào trong 7+)

Chỉ vì tương lai

chúng ta cần quan sát rằng đó [(ngModel)]="hero.name"chỉ là một đoạn ngắn có thể được khử thành : [ngModel]="hero.name" (ngModelChange)="hero.name = $event".

Vì vậy, nếu chúng tôi khử mã đường, chúng tôi sẽ kết thúc với:

<select (ngModelChange)="onModelChange()" [ngModel]="hero.name" (ngModelChange)="hero.name = $event">

hoặc là

<[ngModel]="hero.name" (ngModelChange)="hero.name = $event" select (ngModelChange)="onModelChange()">

Nếu bạn kiểm tra mã trên, bạn sẽ nhận thấy rằng chúng tôi kết thúc với 2 ngModelChangesự kiện và những sự kiện đó cần được thực hiện theo một số thứ tự.

Tóm tắt: Nếu bạn đặt ngModelChangetrước ngModel, bạn sẽ nhận được $eventgiá trị mới, nhưng đối tượng mô hình của bạn vẫn giữ giá trị trước đó. Nếu bạn đặt nó sau ngModel, mô hình sẽ có giá trị mới.

NGUỒN

1 - (change) bị ràng buộc với sự kiện trao đổi HTML. Tài liệu về HTML onchange cho biết như sau:

Thực thi JavaScript khi người dùng thay đổi tùy chọn đã chọn của một <select>phần tử

Nguồn: https://www.w3schools.com/jsref/event_onchange.asp

2 - Như đã nêu trước đây, (ngModelChange)bị ràng buộc với biến mô hình được liên kết với đầu vào của bạn.

Vì vậy, cách giải thích của tôi là:

• (change)kích hoạt khi người dùng thay đổi đầu vào
• (ngModelChange) kích hoạt khi mô hình thay đổi, cho dù nó liên tiếp đến hành động của người dùng hay không