جافاسكريبت - (change) مقابل (ngModelChange) في أنغولار

Angular 1 لا يقبل حدث onchange()، فهو يقبل فقط حدث ng-change().

من ناحية أخرى، يقبل Angular 2 كل من أحداث (change) و (ngModelChange)، وكلاهما يبدو أنه يقوم بنفس الشيء.

ما الفرق؟

أي واحد هو الأفضل من حيث الأداء؟

تغيير نموذج ngModel:

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

مقابل تغيير:

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

الإجابة رقم 1

حدث (change) مرتبط بحدث تغيير الإدخال الكلاسيكي.

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

يمكنك استخدام حدث (change) حتى إذا لم يكن لديك نموذج عند إدخالك كما

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

يعتبر (ngModelChange) هو @Output لتوجيه ngModel. يتم إطلاقه عندما يتغير النموذج. لا يمكنك استخدام هذا الحدث بدون توجيه 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
}

الإجابة رقم 2

في Angular 7، ستنفذ (ngModelChange)="eventHandler()" قبل تغيير القيمة المرتبطة بـ [(ngModel)]="value" بينما ستنفذ (change)="eventHandler()" بعد تغيير القيمة المرتبطة بـ [(ngModel)]="value".

الإجابة رقم 3

كما وجدت وكتبت في موضوع آخر - هذا ينطبق على Angular أقل من 7 (لست متأكدًا كيف هو في 7+)

فقط من أجل المستقبل

نحن بحاجة إلى ملاحظة أن [(ngModel)]="hero.name" هو مجرد اختصار يمكن تبسيطه إلى: [ngModel]="hero.name" (ngModelChange)="hero.name=$event".

لذلك إذا قمنا بإزالة التحلية من الكود سننتهي بـ:

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

أو

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

إذا قمت بفحص الكود أعلاه، ستلاحظ أننا سننتهي بحدثين ngModelChange ويجب تنفيذهما بترتيب معين.

الخلاصة: إذا وضعت ngModelChange قبل ngModel، ستحصل على $event بالقيمة الجديدة، لكن كائن النموذج الخاص بك لا يزال يحمل القيمة السابقة. إذا قمت بوضعه بعد ngModel، سيكون النموذج قد حصل بالفعل على القيمة الجديدة.

المصدر

الإجابة رقم 4

1 - (change) مرتبط بحدث onchange في HTML. تقول الوثائق حول onchange في HTML ما يلي :

تشغيل جافا سكريبت عندما يغير المستخدم الخيار المحدد لعنصر <select>

المصدر: https://www.w3schools.com/jsref/event_onchange.asp

2 - كما ذكرنا سابقًا، (ngModelChange) مرتبط بمتغير النموذج المرتبط بإدخالك.

إذاً، تفسيري هو :

• (change) يُفعّل عندما يقوم المستخدم بتغيير الإدخال
• (ngModelChange) يتم تفعيله عند تغير النموذج، سواء كان ذلك نتيجة لتفاعل المستخدم أو لا

الإجابة رقم 5

حسب خبرتي، (change) و (ngModelChange) لهما استخدامان مختلفان.

1. يتم تفعيل (ngModelChange) عند عرض HTML، وعندما يغير المستخدم قيمة هذا العنصر.

2. يتم تشغيل (change) عندما يغير المستخدم القيمة ويغادر عنصر التركيز.

الاستخدام :

1. (ngModelChange): عندما يكون لديك أشياء حرجة تعتمد على HTML، يجب التعامل مع أي نوع من التغييرات التي تحدث.
2. (التغيير): عندما تحتاج إلى التعامل مع تغييرات القيم التي يقوم بها المستخدم فقط.

ملاحظة: كن حذراً عند استخدام (ngModelChange) لأنه أحيانًا قد يسبب لك مشكلة الحد الأقصى لمكدس الاستدعاءات وسيتوقف النموذج الخاص بك عن العمل.