Передача значения не означает обратного обновления
Привязка свойства передаёт вычисленное значение в элемент или компонент. В шаблонах её обычно обозначают квадратными скобками вокруг имени целевого свойства. Например, значение имени из состояния может попасть в свойство поля ввода. Но одна эта связь не описывает, что делать с последующим вводом пользователя. Представьте две записи: имя в памяти компонента и текст, который сейчас показывает поле. Первоначально они совпадают. Затем человек меняет видимый текст. Пока приложение не обработало соответствующее событие и не записало новое значение, состояние может остаться прежним. Другая подпись, связанная именно с состоянием, продолжит показывать старое имя.
Событие сообщает о действии
Привязка события задаёт реакцию на действие пользователя или другое событие элемента. В шаблоне для неё используются круглые скобки. Обработчик может получить сведения о событии, проверить ввод и изменить состояние. После этого связанные с обновлёнными данными части интерфейса получают новое значение. Важно понимать, какое событие выбрано и когда оно возникает. Реакция на каждый ввод и реакция на завершение изменения не обязаны происходить в один момент. Поэтому проверка только внешнего вида поля может скрыть задержку в обновлении модели. Для диагностики нужно посмотреть, вызывается ли обработчик и действительно ли он меняет нужное свойство.
Двусторонняя связь объединяет два направления
Двусторонняя привязка связывает получение значения и сообщение о его изменении. Её запись сочетает квадратные и круглые скобки. Для обычных форм часто используется ngModel, работа которого требует соответствующего подключения средств форм. Конкретный способ подключения зависит от устройства и версии приложения. Такая запись сокращает типовую связь, но не устраняет необходимость понимать источник данных. Если одно и то же значение хранится ещё в нескольких несогласованных местах, ошибки останутся. Полезно определить, какое состояние является основным и кто имеет право его изменять. При чтении материалов об Angular 2 учитывайте возраст примеров. Основная идея направления данных сохраняет учебную ценность, но настройку проекта, подключение зависимостей и доступные возможности нужно сверять с документацией используемой версии. Не смешивайте старую конфигурацию с новым приложением только потому, что знакомые скобки выглядят одинаково.
Попробуйте на практике
Проследите изменение имени на бумаге, не создавая проект и не устанавливая программы.
- Нарисуйте три блока: состояние компонента, поле ввода и текстовая подпись. Запишите исходное имя во всех трёх.
- Проведите стрелки от состояния к полю и подписи. Затем измените только запись внутри поля и отметьте, почему остальные блоки ещё могут остаться прежними.
- Добавьте событие ввода и обработчик, который записывает новое имя в состояние. Проследите, какие стрелки после этого передают обновление на экран.
- Обведите пару направлений между состоянием и полем как двустороннюю связь. Отдельно подпишите, что проверка значения и сохранение на сервер являются самостоятельными действиями.
Как проверить результат. На схеме различаются видимый ввод, состояние и обработка события. Понятно, почему одна привязка свойства не гарантирует обратного изменения данных.
Частые вопросы
Двусторонняя привязка автоматически сохраняет данные на сервере?
Нет. Она связывает состояние и интерфейс в пределах соответствующей логики приложения. Отправка данных, обработка ответа и ошибок требуют отдельного решения.
Если текст в поле новый, значит состояние точно обновилось?
Не обязательно. Пользователь мог изменить значение самого элемента, а обработчик ещё не сработал или не записал его в нужное место. Нужно проверить путь события и изменение состояния.
Самостоятельный разбор темы. Содержание конкретной обучающей программы здесь не представлено.