Додайте комбінації клавіш у свій кутовий додаток від John Au-Yeung Level Up Coding
Комбінації клавіш - це дуже зручна функція для користувачів. Це дозволяє їм робити речі без багатьох кліків, збільшуючи продуктивність. Обробку клавіатурних скорочень можна легко додати до програм Angular за допомогою бібліотеки гарячих клавіш angular2.
У цій статті ми напишемо додаток для відстеження дієти, який дозволяє користувачам вводити калорії, з’їдені за певний день. Вони можуть використовувати комбінації клавіш, щоб відкрити модальний спосіб додати запис, а також видалити останній запис. Для запуску проекту ми встановлюємо Angular CLI, запускаючи npm i -g @ angular/cli. Далі ми запускаємо Angular CLI для створення проекту, набравши:
У майстрі налаштування ми вирішили включити маршрутизацію та використовувати SCSS як наш препроцесор CSS.
Потім ми встановлюємо кілька пакетів. Нам потрібен пакет гарячих клавіш angular2, про який ми згадали вище, Ngx-Bootstrap для стилізації, а також MobX для зберігання даних у спільному сховищі. Щоб встановити їх, ми запускаємо:
Далі ми створюємо наші компоненти та послуги. Для цього ми запускаємо:
Тепер ми готові написати якийсь код. У дієті-form.component.html ми замінюємо існуючий код на:
Ми додаємо форму, щоб дозволити користувачам вводити дату, яку вони з’їли, і кількість з’їдених калорій в даний день. Ми використовуємо перевірку форми, керовану шаблоном Angular, щоб перевірити, чи все заповнене, переконатися, що дата вказана у форматі РРРР-ММ-ДД, а також перевірити, чи є кількість калорій невід’ємним числом. У нас також є кнопка Зберегти, щоб зберегти дані при натисканні. Ця форма використовується як для додавання, так і для редагування записів.
Далі в дієтичній формі.component.ts ми замінюємо існуючий код на:
Цей файл має функції, які ми називали в попередньому шаблоні, наприклад функцію збереження. У нас також є входи для отримання даних з домашньої сторінки, а також вихідні дані для передачі збереженої події на домашню сторінку. Оскільки ми використовуємо форму для редагування, нам також потрібно передати вибраний запис із введеною вибраною калорією, щоб його можна було редагувати. Щоб оновити об’єкт форми зі значеннями selectedCalorie, ми скопіювали значення, коли змінюється вхід selectedCalorie.
У функції збереження ми перевіряємо форму та викликаємо різні функції для збереження залежно від того, чи використовується форма для додавання чи редагування запису. Останні записи будуть заповнені в нашому магазині MobX, викликавши функцію getCaloriesEaten, і збережена подія буде видана, як тільки це буде зроблено.