javascript - (change) vs (ngModelChange) trong angular

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

Angular 2, mặt khác, chấp nhận cả sự kiện (change) và (ngModelChange), cả hai dường như đều thực hiện cùng một việc.

Sự khác biệt là gì?

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

ngModelChange:

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

vs thay đổi:

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

Câu trả lời #1

Sự kiện (change) được gắn với sự kiện thay đổi đầu vào cổ điển.

https://developer.mozilla.org/vi/docs/Web/Events/change

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

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

(ngModelChange) là @Output của directive ngModel. Nó được 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ó directive 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ậy 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 cái, nhưng các sự kiện ngModel trở nên mạnh mẽ hơn 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ử làm điều tương tự mà không có "ngModel things"

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

Câu trả lời #2

Trong Angular 7, (ngModelChange)="eventHandler()" sẽ được kích hoạt trước khi giá trị gắn với [(ngModel)]="value" bị thay đổi, trong khi (change)="eventHandler()" sẽ được kích hoạt sau khi giá trị gắn với [(ngModel)]="value" bị thay đổi.

Câu trả lời #3

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

Chỉ cho tương lai

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

Vậy nếu chúng ta loại bỏ cú pháp đường trong mã, chúng ta sẽ kết thúc với:

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

hoặc

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

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

Tóm tắt: Nếu bạn đặt ngModelChange trước ngModel, bạn sẽ nhận được $event như giá 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

Câu trả lời #4

1 - (change) được liên kết với sự kiện onchange của HTML. Tài liệu về HTML onchange nói như sau:

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

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

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

Vì vậy, cách diễn giải của tôi là :

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

Câu trả lời số 5

Theo kinh nghiệm của tôi, (change) và (ngModelChange) có hai cách sử dụng khác nhau.

(ngModelChange) kích hoạt khi HTML hiển thị, người dùng thay đổi giá trị của phần tử đó.
(change) kích hoạt khi người dùng thay đổi giá trị và rời khỏi phần tử đang được chọn.

Cách sử dụng :

(ngModelChange): khi bạn có những thứ quan trọng phụ thuộc vào HTML, bất kỳ thay đổi nào bạn phải xử lý.
(change): Khi bạn chỉ phải xử lý các thay đổi giá trị do người dùng thực hiện.