Я хотел реагировать на ввод пользователя и автоматически получать некоторую информацию на сервере с помощью NativeScript и Angular2. Вот как я это делал:

Учитывая это представление:

<StackLayout>
    <TextField (textChanged)=”onMyReactiveInputChanged($event)”></TextField>
</StackLayout>

В TextField есть привязка события textChange:

(textChange)=”onMyReactiveInputChanged($event)”

Привязка события позволяет привязать обработчик к событию textChange, которое вызывается NativeScript при изменении текста в TextField.

Вот сопровождающий скрипт:

import { Component } from "@angular/core";
@Component({
    selector: "foo",
    templateUrl: "pages/foo/bar.html"
})
export class FooPage {
    private inputValue: string;
    private onMyReactiveInputChanged(event: any): void {
        console.log(event.value);
        this.inputValue = event.value;
    }
}

Если ваша привязка шаблона передает событие, вы получаете доступ к информации о событии без необходимости настраивать дочерний элемент представления и поддерживать эту ссылку в коде.

Главное, что вам, скорее всего, понадобится, это значение, то есть в данном случае то, что ввел пользователь.

В предыдущих версиях nativescript-angular вам нужно было использовать «propertyChange» в привязке вместо «textChange». Если вы используете «propertyChange», у вас есть доступ к другим вещам:

  • имя_события: для идентификации события; в данном случае: «propertyChange», так как это то, к чему был привязан обработчик
  • propertyName: свойство TextField, которое изменилось. Используйте это, чтобы определить, хотите ли вы предпринять какие-либо действия (это может быть какое-то другое свойство, изменение которого вам не нужно). В данном случае это «текст».
  • object: это дает вам доступ к компоненту, для которого сработало событие propertyChange; в данном случае TextField. Подумайте о том, чтобы использовать его, чтобы получить поддержку TS, прежде чем копаться в свойствах.

Это будет срабатывать каждый раз, когда происходит изменение свойства поля. В случае текстового значения оно будет срабатывать каждый раз, за исключением нажатия клавиши, когда пользователь полностью очистил поле. Чтобы обработать пустое значение, о котором не уведомляет свойствоChange, и сэкономить на сетевых вызовах, я реализовал таймер и проверял значение локальной переменной (inputValue) после истечения времени таймера. Вот как выглядит эта реализация:

// built in NativeScript timer implementation
import * as timer from "timer";
...
private timerRef: number;
private startTimer(): void {
    // If a timer is running clear it out so it starts over
    if(this.timerRef) {
       timer.clearTimeout(this.timerRef);
    }
    // give the user some time to finish typing
    this.timerRef = timer.setTimeout(() => {
            // only take action if inputValue has a value
            if (this.inputValue !== "" && 
                this.inputValue !== undefined && 
                this.inputValue !== null) {
                this.doTheThing();
            }
        }, 700);
    }

Удачного кодирования!