(เปลี่ยน) vs (ngModelChange) เป็นมุม

Angular 1 ไม่ยอมรับonchange()กิจกรรม แต่ยอมรับเฉพาะng-change()กิจกรรม

ในทางกลับกัน 2 ยอมรับทั้งสอง(change)และ(ngModelChange)เหตุการณ์ซึ่งทั้งสองดูเหมือนจะทำสิ่งเดียวกัน

ความแตกต่างคืออะไร?

อันไหนดีที่สุดสำหรับประสิทธิภาพ?

ngModelChange :

<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"/>

(change) เหตุการณ์ที่ถูกผูกไว้กับเหตุการณ์การเปลี่ยนแปลงอินพุตคลาสสิก

https://developer.mozilla.org/en-US/docs/Web/Events/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
}

ในเชิงมุม 7 (ngModelChange)="eventHandler()"จะยิงก่อนค่าผูกพันที่จะ[(ngModel)]="value"มีการเปลี่ยนแปลงในขณะที่(change)="eventHandler()"จะยิงหลังจากค่าผูกพันที่จะ[(ngModel)]="value"มีการเปลี่ยนแปลง

ตามที่ฉันได้พบและเขียนในหัวข้ออื่น - สิ่งนี้ใช้กับเชิงมุม <7 (ไม่แน่ใจว่ามันเป็นอย่างไรใน 7+)

เพียงเพื่ออนาคต

เราจำเป็นที่จะสังเกตเห็นว่า[(ngModel)]="hero.name"เป็นเพียงการตัดสั้นที่สามารถ de-sugared [ngModel]="hero.name" (ngModelChange)="hero.name = $event"ไปที่:

ดังนั้นถ้าเราทำ de-sugar code เราจะได้:

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

หรือ

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

หากคุณตรวจสอบรหัสข้างต้นคุณจะสังเกตเห็นว่าเราจบลงด้วย 2 ngModelChangeเหตุการณ์และสิ่งเหล่านั้นจะต้องถูกดำเนินการในบางลำดับ

สรุป: ถ้าคุณวางไว้ngModelChangeก่อนหน้าngModelนี้คุณจะได้รับ$eventค่าใหม่ แต่วัตถุจำลองของคุณยังคงมีค่าก่อนหน้า หากคุณวางไว้หลังจากngModelนั้นโมเดลจะมีค่าใหม่แล้ว

แหล่งที่มา

1 - (change)ถูกผูกไว้กับเหตุการณ์การเปลี่ยน HTML เอกสารเกี่ยวกับ HTML onchange กล่าวดังนี้:

เรียกใช้งาน JavaScript เมื่อผู้ใช้เปลี่ยนตัวเลือกที่เลือกไว้ของ<select>องค์ประกอบ

ที่มา: https://www.w3schools.com/jsref/event_onchange.asp

2 -ตามที่ระบุไว้ก่อนหน้า(ngModelChange)นี้ถูกผูกไว้กับตัวแปรโมเดลที่เชื่อมโยงกับอินพุตของคุณ

ดังนั้นการตีความของฉันคือ:

• (change)ทริกเกอร์เมื่อผู้ใช้เปลี่ยนอินพุต
• (ngModelChange) เรียกใช้เมื่อโมเดลเปลี่ยนแปลงไม่ว่าจะเป็นแบบต่อเนื่องกับแอ็คชันของผู้ใช้หรือไม่