更改检测角度2模型的属性

Question

I need to call a JQuery function each time if my model's propery got changed.

person = {firstName:firstName, lastName:lastName}

as an example If I changed the firstName property of person object, every time I need to trigger a function. Actually I need a something like subscription to this object's property.

How is it possible?

thanks in advance.

Answer 1

It sounds like you are looking for the DoCheck ( link to docs ) life cycle hook. It is an event that will be triggered after every completed round of change detection. Keep in mind though that it will potentially be triggered a lot, and doing heavy operations in that hook could have a major negative impact on performance.

Here is an example that looks for changes on the person.firstName property, and logs it to the console if changes are found:

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<input type="text" [(ngModel)]="person.firstName">`,
  styleUrls: ['./app.component.css']
})
export class AppComponent implements DoCheck {
  person = { firstName: 'Donald', lastName: 'Duck' };
  oldFirstName: string;

  ngDoCheck() {
    if (this.person.firstName !== this.oldFirstName) {
      console.log(`Change first name from "${this.oldFirstName}" to "${this.person.firstName}"`);
      this.oldFirstName = this.person.firstName;
    }
  }
}