Share
În cel de-al treilea tutorial al seriei, ați învățat cum să creați aplicația HomeComponent a informațiilor despre țara dvs. Vom crea alte două componente în acest tutorial. Una dintre componente va lista toate țările pe care le-am stocat în ȚĂRI matrice. O altă componentă va afișa detaliile oricărei țări selectate de utilizator.
HomeComponent pe care am creat-o în tutorialul precedent și în AllCountriesComponent pe care o vom crea în această secțiune sunt foarte asemănătoare. Singura diferență este că, în loc de sortare ȚĂRI și aruncați-o pentru a obține doar primele trei țări, le vom lista pe toate. În interiorul consolei, treceți la directorul de proiect și executați următoarea comandă:
ng generează componente pentru toate țările
Acest lucru va crea un folder numit toate tarile în interiorul src / app directorul aplicației dvs. Angular. Dosarul va avea trei nume de fișiere diferite toate-countries.component.ts, all-countries.component.html, și all-countries.component.css. Logica componentei cum ar fi obținerea listei de țări și inițierea componentei în sine va intra în interiorul .ts fişier. .html fișierul va stoca șablonul pentru componentă și .css fișierul va stoca diferite reguli CSS pentru a modela șablonul.
Iată codul pentru toate-countries.component.ts fişier:
import Component, OnInit de la '@ angular / core'; import Country de la "... / țară"; import CountryService de la "... / country.service"; @Component (selector: 'app-all-countries', templateUrl: './all-countries.component.html', styleUrls: ['./all-countries.component.css']) clasa de export AllCountriesComponent implementează OnInit țări: Țară []; constructor (țară privatăService: CountryService) ngOnInit () this.getCountries (); getCountries (): void this.countries = this.countryService.getCountries ();
După cum puteți vedea, codul este destul de simplu. Importem Țară și CountryService clase pe care le-am creat în al doilea tutorial al seriei. Decoratorul de componente este utilizat pentru a specifica selectorul pe care îl vom folosi pentru a identifica AllCountriesComponent.
În interiorul definiției clasei, creăm a țări proprietate care acceptă o serie de Țară obiecte ca valoare. CountryService clasa este adăugată la component utilizând injectarea de dependență. Noi numim getCountries () metodă din această clasă la inițializare. getCountries () metoda în sine se bazează pe getCountries () de la CountryService clasa, care returnează o serie de Țară obiecte.
all-countries.component.html fișierul va stoca șablonul pentru componenta noastră.
Lista tuturor țărilor din baza noastră de date
numele tarii
Capital
(Country.capital)
La fel ca șablonul pentru HomeComponent, noi folosim * ngFor pentru a lista toate țările obținute de către getCountries () și stocate în țări proprietate a AllCountriesComponent clasă. Utilizăm această componentă pentru a afișa capitalele din diferite țări utilizând capital proprietate. Veți afla despre routerLink directiva folosită cu A în următorul tutorial.
CSS folosit este același cu cel al home.component.css fişier. Singura diferență este că schimbăm culoarea de fundal pentru fiecare bloc de țară în verde. Iată codul complet CSS:
a text-decoration: none; *, *: după, *: înainte de box-size: border-box; 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: # 4CAF50; raza de graniță: 2px; .country-block: hover background-color: # FF5722; cursor: pointer; culoare albă;
CountryDetailComponent va fi cea de-a treia și componenta finală a aplicației noastre Angulare. Ori de câte ori utilizatorii fac clic pe numele oricărei țări listate în interiorul fiecăruia HomeComponent sau AllCountriesComponent, acestea vor fi luate la CountryDetailComponent.
Reveniți la consola și executați următoarea comandă:
ng generează detalii despre țări
Acest lucru va crea un folder numit țară detalii în interiorul src / app directorul aplicației dvs. Ar trebui să vedeți patru fișiere diferite în interiorul dosarului. Trei dintre aceste fișiere vor fi numite: Country-detail.component.ts, țară-detail.component.html, și țară-detail.component.css. La fel ca și componentele anterioare, Country-detail.component.ts va conține logica componentei noastre și țară-detail.component.html va conține șablonul pentru al face.
Iată codul pentru Country-detail.component.ts fişier:
Accentsconagua
import Component, OnInit de la '@ angular / core'; import ActivatedRoute de la '@ unghiular / router'; import Location din '@ unghiular / common'; import Country de la "... / țară"; import CountryService de la "... / country.service"; @Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css']) clasa de export CountryDetailComponent implementează OnInit țară: țară; constructor (rută privată: ActivatedRoute, țară privatăService: CountryService, locație privată: Locație) ngOnInit (): void this.getCountry (); getCountry (): void const nume: string = this.route.snapshot.paramMap.get ('nume'); this.country = această.countryService.getCountry (nume); goBack (): void this.location.back (); De data aceasta am importat și ActivatedRoute și locația, împreună cu component și OnInit. Folosim ActivatedRoute pentru a accesa informații despre o rută asociată unei componente încărcate într-o priză. Folosim Locație pentru a permite aplicației noastre să interacționeze cu adresa URL a browserului.
În interiorul definiției clasei, vom crea o proprietate numită țară care acceptă a Țară obiect ca valoare. Spre deosebire de HomeComponent și AllCountriesComponent, CountryDetailComponent clasa trebuie să prezinte detalii despre o singură țară la un moment dat.
getCountry () extrage metoda Nume parametru din imaginea rutei și utilizează valoarea pentru a găsi o țară cu numele dat în interiorul ȚĂRI matrice. întoarce-te() metoda returnează utilizatorul înapoi la pagina anterioară cu ajutorul înapoi() metoda de la Locație clasă.
Iată codul pentru țară-detail.component.html fişier:
country.name | majuscule
Capital: Country.capital
Zonă: country.area | număr km 2
populaţie: țară număr
PIB: country.gdp | număr USD
Valută: Country.currency
Codul șablonului din interiorul div cu * NgIf = "țară" este redat numai dacă țară a fost setat la o valoare. Folosim țevi Angular pentru a valorifica numele țării și pentru a forma în mod corespunzător zona și populația țărilor. Suntem obligatorii evenimentul de clic al nostru Întoarce-te butonul pentru a întoarce-te() metodă a componentei noastre, astfel încât ori de câte ori utilizatorii să facă clic pe un buton, aceștia sunt returnați la pagina anterioară.
Aici este CSS care va intra în interiorul țară-detail.component.css fişier:
.container margine: 0 auto; lățime: 380px; h2, p font-family: "Lato"; p font-size: 1.25rem; p span culoare: # 4CAF50; raza de graniță: 5px; lățime: 200px; afișare: inline-block; etichetă display: inline-block; lățime: 3m; margine: .5em 0; culoare: # 607D8B; font-weight: bold; font-familie: 'Lato'; butonul margin-top: 20px; font-familie: Arial; fundal-culoare: # F44336; frontieră: nici una; padding: 5px 10px; border-radius: 20px; cursor: pointer; contur: nici unul; culoare albă; font-familie: 'Lato';
Odată cu finalizarea acestui tutorial, am adăugat încă două componente la prima noastră aplicație Angular. AllCountriesComponent a fost foarte asemănătoare cu HomeComponent deoarece ambele au furnizat o listă a țărilor stocate în ȚĂRI matrice. CountryDetailComponent a fost diferită deoarece a extras informații despre o singură țară din ȚĂRI array pe baza numelui său.
După crearea a trei componente diferite, acum ar trebui să aveți o înțelegere de bază a interacțiunilor dintre .ts, .html, și .css pentru a crea o componentă pe deplin funcțională.
În următorul tutorial al seriei, veți învăța cum să utilizați toate aceste componente împreună și să faceți unele modificări finale, astfel încât aplicația să poată funcționa fără erori.
