Основи Angular 4: привязка даних

15

Від автора: прив’язка даних – це концепція Angular, з допомогою якої розробники можуть змінювати статичний контент веб-додатки, роблячи додаток більш активним і привабливим. Перш ніж говорити про те, як ця концепція була реалізована в Angular, я поясню на прикладі. В серії уроків основи Angular 4 в якості прикладу я буду використовувати простий інтернет-магазин. Щоб купити щось в магазині, спочатку необхідно клікнути на кнопку Shop Now на сторінці Home. Після цього користувач буде перенаправлено на список елементів, які ми і будемо продавати в нашому магазині.

Основи Angular 4: привязка даних

Для реалізації цього функціоналу спочатку необхідно визначити дію для кнопки shop now. Далі користувача необхідно направити на сторінку shop і відобразити набір елементів для продажу. Ці елементи, зазвичай, не статичні. Швидше за все, ці елементи ми будемо витягати з бази даних і відображати на сторінці shop динамічно. Такого роду динамічно події з залученням уваги користувача можна виконувати за допомогою прив’язки даних в Angular.

У Angular прив’язку даних можна розділити на 4 категорії – рядкова інтерполяція, прив’язка властивостей, прив’язка подій і двостороння прив’язка. Ці чотири типи дозволяють спілкуватися бізнес-логіки (код Script Type) з поданням (HTML код), як показано на діаграмі нижче.

Основи Angular 4: привязка даних

Візьмемо попередній приклад з відображенням списку елементів на сторінці shop. Уявіть, що вам необхідно відображати поіменно кожен елемент на сторінці у вигляді списку.

Основи Angular 4: привязка даних

Для цього спочатку необхідно витягнути елементи з бази даних в коді Type Script. Далі нам якимось чином необхідно надіслати ці дані в HTML-код, щоб показати їх користувачеві. Це один із способів взаємодії коду Script Type з HTML-кодом. У Angular є 2 способи такої взаємодії.

Інтерполяція рядків

За допомогою цього методу ми можемо вмонтувати елементи script type в HTML код. Нижче представлений код з нашої програми.

export class ItemComponent {
ім’я елемента: «Item1»;

Це код з нашого компонента елемента. Як бачите, у нього є властивість ім’я елемента зі значенням за замовчуванням item1. В наступних статтях обговоримо спосіб отримання списку елементів з бази даних. Зараз же давайте припустимо, що у нас є лише один елемент в магазині. У цієї змінної нам необхідно зберігати ім’я елемента.

{{ім’я елемента}}

Код вище взяти з HTML-файлу шаблону. Ми просто відображаємо ім’я елемента всередині тега h4. Як бачите, ми помістили ім’я Script Type властивості «{{}}». Ці дужки називаються строкової інтерполяцією в Angular всередині HTML коду. Ми можемо напряму звертатися до елементів Script Type коду і відображати значення елементів у поданні, як у нашому прикладі. Запам’ятайте, всередині подвійних фігурних дужок ми можемо помістити будь-який рядок, яка буде зіставлятися з відповідним елементом typescript. ex: {{ім’я елемента}} , {{‘ім’я елемента’}} також валидно.

Усередині цих дужок можна також виконувати функції typescript, у виставі буде відображатися значення, що повертається. {{getItemName()}} також валидна.

Прив’язка властивостей

Ще один спосіб комунікації Script Type коду HTML. В цей раз ми прив’язуємо властивість Type Script до HTML властивості.

export class ItemComponent {
ім’я елемента: «Item1»;

Представлений вище код з файлу ItemComponent Type Script. Припустимо, що у нас всього один елемент в магазині. Нам необхідно відобразити ім’я елемента властивості ім’я елемента.

Замість строкової інтерполяції можна написати HTML код. Тут [innerText] – спосіб прив’язки HTML властивості Angular. Квадратні дужки [] говорять про те, що ми будемо використовувати прив’язку властивостей. Усередині дужок необхідно вказати властивість елемента HTML для використання. У цьому прикладі ми будемо використовувати властивість innerText тега h4. Існує маса HTML властивостей, які можна використовувати для прив’язки. З допомогою innerText можна змінювати текст тега h4. Якщо цій властивості присвоїти який-небудь текст:

innerText=»some text»

Цей текст буде показаний в поданні. У нашому прикладі саме це і відбувається, але замість тексту ми будемо показувати динамічний контент з файлу Script Type. Прив’язати можна як змінну, так і функцію Type Script.

[innerText]=»ім’я елемента» [innerText]=»getItemName()» також валідні.

Прив’язка подій

Досі ми розглядали способи комунікації Script Type файлів і HTML файлів в одному напрямку. Нижче ми подивимося, як зробити зворотну операцію. Ми пошлемо дані з HTML файлу Script Type файл. У попередньому прикладі ми говорили, що нам необхідно перенаправити користувача зі сторінки home на shop по кліку на кнопку shop now. Це можна зробити з допомогою прив’язки подій. Необхідно лише прописати логіку редиректа в файл Script Type, після чого прив’язати цю логіку до події onClick кнопки shop now.

export class HomeComponent {
onClickShopNow() {
// Redirecting logic goes here
}

Код HomeComponent. Ми створили нову функцію onClickShopNow, в яку помістимо логіку редиректа (логіку редіректу обговоримо в наступних уроках). Зараз нам потрібно прив’язати цю функцію до кнопки shop now у файлі HTML HomeComponent.