Обнаружение изменений в Angular 2.0

У меня есть компонент Angular2.0:

import {Component, View, FORM_DIRECTIVES} from 'angular2/angular2';

@Component({
  selector: 'font-size-component',
  properties: ['fontSize'],
  events: ['fontSizeChanged']
})
@View({
  template: `<input id="fontSize" [(ng-model)]="fontSize"/>`,
  directives: [FORM_DIRECTIVES]
})
export class FontSizeComponent {
  constructor() {

  }
}

Теперь я хочу, чтобы этот компонент запускал событие (используя привязку события) при изменении ввода.

В Angular 1.X у меня было несколько вариантов (ng-change или $scope.$wacth). Я ищу аналогичное решение, поэтому при изменении ввода я смогу использовать eventemitter и запустить событие fontSizeChanged.

Спасибо,

Янив

Ответы

Ответ 1

Вы можете использовать javascript getters и сеттеры. Таким образом, ваш компонент будет выглядеть так:

import {Component, View, FORM_DIRECTIVES, EventEmitter} from 'angular2/angular2';

@Component({
    selector: 'font-size-component',
    properties: ['fontSize'],
    events:     ['fontSizeChange']
})
@View({
    template: `
        <input id="fontSize" [(ng-model)]="fontSizeModel"/>
    `,
    directives: [FORM_DIRECTIVES]
})
export class FontSizeComponent {
    fontSize: string;
    fontSizeChange = new EventEmitter();

    get fontSizeModel() {
        return this.fontSize;
    }

    set fontSizeModel(value) {
        this.fontSizeChange.next(value);
    }
}

Отметьте этот plnkr

Немного другое решение заключается в использовании привязки события (input):

@Component({
    selector: 'font-size-component',
    properties: ['fontSize'],
    events:     ['fontSizeChange']
})
@View({
    template: `
        <input 
          id="fontSize" 
          [value]="fontSize" 
          (input)="fontSizeChange.next($event.target.value)"
        />
    `,
    directives: [FORM_DIRECTIVES]
})
export class FontSizeComponent {
    fontSize: string;
    fontSizeChange = new EventEmitter();
}

Смотрите этот plnkr

Ответ 2

Вы также можете нажать на крючки жизненного цикла Angular2. Из документации:

ngOnChanges (changeRecord) {...}
Вызывается после каждого изменения свойств ввода и перед обработкой содержимого или дочерних представлений.

См. https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Просто добавьте этот метод в свой класс компонента:

ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {
  if (changes['fontSize']) { // fire your event }
}

В приведенном выше руководстве содержится Plunkr для этого: https://angular.io/resources/live-examples/lifecycle-hooks/ts/plnkr.html

Ответ 3

Если вы хотите вручную обрабатывать изменения на входе, вы можете выделить короткий [[ngModel]], выполнив что-то вроде этого:

<input id="fontSize" [ngModel]="fontSize" (ngModelChange)="fontSizeChange($event)"/>

Убедитесь, что в функции fontSizeChange($event) вы используете $event для назначения измененного входного значения переменной fontSize, поскольку это больше не выполняется автоматически.

Когда вы используете [(ngModel)], он действительно делает что-то вроде этого:

<input id="fontSize" [ngModel]="fontSize" (ngModelChange)="fontSize=$event" />

Для получения дополнительной информации вы можете обратиться к официальной документации: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#two-way-binding-with-ngmodel

В настоящее время Angular 2 все еще находится в состоянии бета-версии, поэтому это может быть изменено.