Я хотел реагировать на ввод пользователя и автоматически получать некоторую информацию на сервере с помощью 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); }
Удачного кодирования!