Share
Cel de-al doilea tutorial din această serie te-a învățat cum să stochezi datele în aplicația Angular și să le accesezi folosind o clasă de servicii. În acest tutorial, vom crea HomeComponent pentru aplicația noastră Angulară.
Pagina de pornire sau HomeComponent pe care îl creăm, vor lista primele trei țări în diferite categorii, cum ar fi populația și zona. Datele pentru a determina ordinea de sortare vor fi luate din ȚĂRI array creat în tutorialul anterior.
Pentru a crea HomeComponent, schimbați directorul din consola în dosarul aplicației și executați următoarea comandă:
ng genera componentă acasă
Acest lucru va crea un folder numit acasă în interiorul src / app dosar cu patru fișiere în interiorul acestuia. Pentru această aplicație, trebuie să ne ocupăm doar de trei fișiere numite home.component.ts, home.component.css, și home.component.html. home.component.ts fișierul va conține toată logica pentru componentă, iar fișierele CSS și HTML vor controla aspectul și structura componentei.
Să începem prin editarea home.component.ts fişier. HomeComponent ar trebui să prezinte primele trei țări cele mai populate, cele trei țări cele mai mari, și cele trei țări cu cel mai mare PIB stocat în UE ȚĂRI mulțime.
Vom importa ambele Țară clasa și CountryService clasa pe care am creat-o în ultimul tutorial. De asemenea, vom importa component și OnInit din @ Unghiular / core. OnInit dependența oferă un cârlig de viață care este numit imediat după ce sunt inițializate proprietățile legate de date ale unei directive.
După importarea tuturor dependențelor necesare, vom defini decoratorul nostru component. Decoratorul de componente este utilizat pentru a furniza informațiile necesare privind metadatele legate de componenta noastră. Vom stabili o valoare pentru selector, templateUrl, și styleUrls în interiorul decoratorului.
Selectorul este utilizat pentru a specifica eticheta care va fi utilizată pentru a identifica componenta noastră. templateUrl este folosit pentru a furniza adresa URL a șablonului care trebuie redat atunci când Angular întâlnește selectorul furnizat. styleUrls proprietatea este utilizată pentru a specifica diferite foi de stil care ar trebui să fie aplicate șablonului dat. Aici este codul din interior home.component.ts pana la acest punct:
import Component, OnInit de la '@ angular / core'; import Country de la "... / țară"; import CountryService de la "... / country.service"; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'])
Acum vom începe să definim HomeComponent clasă cu diferite proprietăți și metode care să ne ajute să afișăm utilizatorilor datele țării. HomeComponent clasa va avea trei proprietăți diferite, care vor accepta o serie de țări ca valoare. Putem injecta o dependență în constructorul componentei prin specificarea unui parametru constructor cu tipul de dependență. Așa vom injecta CountryService clasă în interiorul nostru HomeComponent.
Iată restul codului pentru home.component.ts fişier:
clasa de export HomeComponent implementează OnInit populateCountries: Țară [] = []; Cele mai mari țări: Țară [] = []; gdpCountries: Țară [] = []; constructor (țară privatăService: CountryService) ngOnInit () this.setPopulatedCountries (); this.setLargestCountries (); this.setGDPCountries (); setPopulatedCountries (): void this.populatedCountries = this.countryService.getPopulatedCountries (); setLargestCountries (): void this.largestCountries = this.countryService.getLargestCountries (); setGDPCountries (): void this.gdpCountries = this.countryService.getGDPCountries ();
Am creat trei metode care utilizează CountryService pentru a obține țările cu cea mai mare suprafață, cea mai mare populație și cel mai mare PIB. Matricele returnate de diferite CountryService metodele sunt apoi atribuite proprietăților corespunzătoare ale HomeComponent clasă.
Trebuie să rețineți că toate aceste metode stabilesc valoarea populatedCountries, largestCountries, și gdpCountries sunt numite în interiorul ngOnInit () astfel încât valorile lor să poată fi utilizate imediat ce componenta este creată.
După scrierea codului pentru HomeComponent , este timpul să creați șablonul HTML pentru componentă. Deoarece codul din interior home.component.html este cea mai mare parte HTML, voi explica numai părțile specifice unghiului. Iată codul pentru întregul fișier:
Cele trei țări cele mai populate
numele tarii
țară număr
oameni
Trei țări mai mari (zonă)
numele tarii
country.area | număr km 2
Țări cu cel mai ridicat PIB
numele tarii
country.gdp | număr USD
După cum am explicat mai devreme, populatedCountries, largestCountries, și gdpCountries au fost atribuite o serie de Țară obiecte ca valoare. Noi folosim NgFor direcționează asupra tuturor țărilor dintr-o anumită matrice și își arată numele și proprietățile respective. De exemplu, * ngFor = "permite țării de populate state" buclele peste toate obiectele din interiorul țării populatedCountries și atribuie acea valoare variabilei locale țară. Această directivă face, de asemenea, corespondența A etichetă, precum și toate celelalte etichete din interiorul acesteia pentru fiecare obiect din interiorul țării populatedCountries matrice. Aceeași explicație este valabilă și pentru toate blocurile de țară redate prin iterări largestCountries și gdpCountries.
Folosim țevi Angular pentru a formata corect valorile populației, zonei și PIB-ului pentru diferite țări pentru a le face mai ușor de citit. Un lucru pe care ați putea găsi confuz este: routerLink directivă pe care am folosit-o cu toate A Etichete. Vom discuta mai detaliat în ultimul tutorial al seriei atunci când vom scrie codul pentru a traversa între diferite componente sau secțiuni ale aplicației. Valoarea lui routerLink directiva acționează ca o legătură obișnuită pe care o întâlnim pe site-urile pe care le vizităm. Diferența importantă este că, în loc de încărcare a paginilor, vom încărca componente.
În sfârșit, puteți scrie câteva CSS pentru a face șablonul HTML mai prezentabil. Iată CSS pe care l-am folosit pentru HomeComponent. Rețineți că acest CSS trebuie să intre în interiorul home.component.css fişier.
corp font-family: 'Lato'; h2, h3, h4, p font-familie: "Lato"; margine: 10 pixeli; .country-block p margin-top: 0; marginea inferioară: 0; .country-block h4 margin-bottom: 10px; h4 poziție: relativă; font-size: 1.25rem; .container margine: 0 50px; text-align: centru; . țară (lățime: 200px; afișare: inline-block; margine: 10 pixeli; br clar: ambele; .country-block padding: 30px 0; text-align: centru; culoare albă; înălțime: 150px; fundal-culoare: # 795548; raza de graniță: 2px; .country-block: hover background-color: # 9C27B0; cursor: pointer; culoare albă;
Este important ca CSS să fie în interior home.component.css se aplică numai elementelor din interiorul home.component.html fişier.
S-ar putea să doriți să faceți HomeComponent în interiorul coajății aplicației prin modificarea conținutului app.component.html fișier la următoarele:
titlu
Din păcate, atunci când încerci să faci acest lucru, vei primi următoarea eroare:
Nu se poate lega la "routerLink" deoarece nu este o proprietate cunoscută a "a".
Vom vorbi mai multe despre routerLink directive și cum să scapi de această eroare în cel de-al cincilea tutorial din această serie. În acest moment, puteți elimina toate mențiunile routerLink de la home.component.html fișier pentru a rula aplicația dvs. Angular fără nici o eroare. Doar asigurați-vă că adăugați totul înapoi la fișier.
Dacă nu ați creat niciodată o aplicație Angular, obținerea confortabilă cu componentele va dura ceva timp. Pentru a ușura înțelegerea, puteți lua în considerare componente asemănătoare diferitelor cadre iframe încărcate în interiorul unei pagini Web. .ts fișierele conțin logica componentei, la fel ca .js fișierele conțin logica pentru iframe.
.html fișierele conțin elementele pe care doriți să le redați într - o iframe sau în interiorul unei componente și .css fișierele conțin reguli de stil diferite pentru aceste elemente. Recunosc că nu este o comparație foarte precisă, dar ar trebui să ajute începătorii să înțeleagă componentele și relația dintre diferitele fișiere ale unei componente.
În tutorialul următor, vom crea alte două componente care vă vor ajuta să înțelegeți mai clar componentele. Dacă aveți întrebări legate de codul asociat HomeComponent, vă rugăm să anunțați-mă în comentarii.
Accentsconagua