Adăugați comenzi rapide de la tastatură la aplicația dvs. unghiulară de John Au-Yeung Cod de creștere a nivelului
Comenzile rapide de la tastatură sunt o caracteristică foarte convenabilă pentru utilizatori. Le permite să facă lucruri fără multe clicuri, sporind productivitatea. Manevrarea comenzilor rapide de la tastatură poate fi ușor adăugată la aplicațiile Angular cu ajutorul bibliotecii angular2-hotkeys.
În acest articol, vom scrie o aplicație de urmărire a dietei care permite utilizatorilor să introducă caloriile consumate pentru o anumită zi. Aceștia pot utiliza comenzile rapide de la tastatură pentru a deschide modalitatea pentru a adăuga o intrare și, de asemenea, pentru a șterge ultima intrare. Pentru a începe proiectul, instalăm CLI angular executând npm și -g @ angular/cli. Apoi rulăm CLI angular pentru a crea proiectul tastând:
În expertul de configurare, alegem să includem rutare și să folosim SCSS ca preprocesor CSS.
Apoi instalăm câteva pachete. Avem nevoie de pachetul angular2-hotkeys menționat mai sus, Ngx-Bootstrap pentru styling, precum și MobX pentru a stoca datele într-un magazin partajat. Pentru a le instala, rulăm:
Apoi ne creăm componentele și serviciile. Pentru a face acest lucru, executăm:
Acum suntem gata să scriem un cod. În diet-form.component.html, înlocuim codul existent cu:
Adăugăm formularul pentru a permite utilizatorilor să introducă data la care au mâncat și cantitatea de calorii consumate în ziua dată. Folosim validarea formularului cu șablon Angular pentru a verifica dacă totul este completat, pentru a verifica dacă data este în format AAAA-LL-ZZ și pentru a verifica dacă numărul de calorii este un număr non-negativ. De asemenea, avem un buton Salvare pentru a salva datele atunci când se face clic pe ele. Acest formular este utilizat atât pentru adăugarea, cât și pentru editarea intrărilor.
Apoi în diet-form.component.ts, înlocuim codul existent cu:
Acest fișier are funcțiile pe care le-am numit în șablonul anterior, cum ar fi funcția de salvare. De asemenea, avem intrări pentru a obține datele de pe pagina de pornire, precum și o ieșire pentru a emite un eveniment salvat pe pagina de pornire. Deoarece folosim formularul pentru editare, trebuie să trecem și în intrarea selectată cu Intrarea selectată de calorii, astfel încât să poată fi editată. Pentru a actualiza obiectul formularului cu valorile selectate de calorii, am copiat valoarea ori de câte ori se modifică intrarea selectată de calorii.
În funcția de salvare, validăm formularul și apelăm diferite funcții pentru salvare, în funcție de faptul dacă formularul este utilizat pentru adăugarea sau editarea unei intrări. Cele mai recente intrări vor fi populate în magazinul nostru MobX apelând funcția getCaloriesEaten și evenimentul salvat va fi emis odată ce a fost finalizat.