(change) vs (ngModelChange) в angular

Angular 1 не приема събитието onchange(), а само събитието ng-change().

Angular 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"/>
Ramesh Rajendran
Редактиран въпрос Направете октомври 2019 в 5:19
Програмиране
javascript html angular typescript angular-ngmodelchange
Направете юни 2017 в 7:16
13 изгледи
Решение

Събитие (промяна), свързано с класическо събитие за промяна на входа.

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

          {{data.name}}
Michael
Редактиран отговор Направете април 2019 в 2:48
Коментари (9)

В Angular 7 функцията (ngModelChange)="eventHandler()" ще се задейства преди стойността, свързана с [(ngModel)]="value", да бъде променена, докато функцията (change)="eventHandler()" ще се задейства след промяна на стойността, свързана с [(ngModel)]="value".

Tiago supports GoFundMonica
Редактиран отговор Направете декември 2018 в 11:54
Коментари (7)

Както открих и написах в друга тема - това важи за Angular < 7 (не съм сигурен как е в 7+)

Само за в бъдеще

трябва да отбележим, че [(ngModel)]="hero.name" е просто съкращение, което може да бъде разграфено до: (ngModelChange)="hero.name" (ngModelChange)="hero.name = $event".

Така че, ако десугестираме кода, ще получим:

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

или

``

Ако разгледате горния код, ще забележите, че в крайна сметка имаме 2 събития ngModelChange и те трябва да се изпълняват в определен ред.

В заключение: Ако поставите ngModelChange преди ngModel, ще получите $събитието като нова стойност, но вашият обект модел все още ще притежава предишната стойност. Ако го поставите след ngModel, моделът вече ще има нова стойност.

ИЗТОЧНИК

Коментари (0)