Den andre opplæringen i denne serien lærte deg hvordan du lagrer data i Angular-appen og får tilgang til den ved hjelp av en serviceklasse. I denne opplæringen vil vi opprette HomeComponent for vår Angular app.

Hjemmesiden eller HomeComponent som vi oppretter vil liste de tre øverste landene i ulike kategorier som befolkning og område. Dataene for å bestemme sorteringsordren vil bli hentet fra LAND array vi opprettet i den forrige opplæringen.

Opprette HomeComponent Class

Å opprette HomeComponent, endre katalogen i konsollen til appmappen din og kjør følgende kommando:

ng generere komponent hjemme

Dette vil opprette en mappe som heter Hjem inne i src / app mappe med fire filer inni den. For denne appen trenger vi bare å være opptatt av tre filer som heter home.component.ts, home.component.css, og home.component.html. De home.component.ts filen vil inneholde all logikken for komponenten, og CSS og HTML-filene vil kontrollere utseendet og strukturen til komponenten.

La oss begynne med å redigere home.component.ts fil. De HomeComponent skal vise de tre største befolkningene, de tre største landene og de tre landene med høyest BNP som er lagret i LAND matrise. 

Vi vil importere begge Land klasse og CountryService klasse som vi opprettet i den siste opplæringen. Vi vil også importere Komponent og OnInit fra @ Vinkel / kjerne. De OnInit avhengighet gir en livssykluskrok som kalles rett etter at databundne egenskaper til et direktiv er initialisert.

Etter å ha importert alle nødvendige avhengigheter, vil vi definere vår komponentdekorator. Komponentdekoratøren brukes til å gi nødvendig metadatainformasjon relatert til vår komponent. Vi vil sette en verdi for velger, templateUrl, og styleUrls inne i dekoratøren. 

Velgeren brukes til å spesifisere taggen som skal brukes til å identifisere komponenten vår. De templateUrl brukes til å oppgi nettadressen for malen som skal gjengis når Angular møter den angitte velgeren. De styleUrls Egenskapen brukes til å angi forskjellige stilark som skal brukes på den oppgitte malen. Her er koden inne home.component.ts opp til dette punktet:

importer Komponent, OnInit fra '@ vinkel / kjerne'; importer Country fra '... / country'; importer CountryService fra '... /country.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'])

Nå skal vi begynne å definere HomeComponent klasse med forskjellige egenskaper og metoder for å hjelpe oss med å vise landsdata til brukere. De HomeComponent klassen vil ha tre forskjellige egenskaper, som vil akseptere en rekke land som deres verdi. Vi kan injisere en avhengighet i komponentens konstruktør ved å spesifisere en konstruktorparameter med avhengighetstypen. Slik injiserer vi CountryService klasse inne i vår HomeComponent. 

Her er resten av koden for home.component.ts fil:

eksport klasse HomeComponent implementerer OnInit populatedCountries: Country [] = []; største land: land [] = []; gdpCountries: Land [] = []; Konstruktør (privat landService: CountryService)  ngOnInit () this.setPopulatedCountries (); this.setLargestCountries (); this.setGDPCountries ();  setPopulatedCountries (): void this.populatedCountries = this.countryService.getPopulatedCountries ();  setLargeCountries (): void this.largestCountries = this.countryService.getLargeCountries ();  setGDPCountries (): void this.gdpCountries = this.countryService.getGDPCountries (); 

Vi har opprettet tre metoder som bruker CountryService klasse for å få landene med det største området, den høyeste befolkningen og det høyeste BNP. Arrays returnerte av forskjellige CountryService metoder tilordnes deretter til de tilsvarende egenskapene til HomeComponent klasse.

Du bør merke seg at alle disse metodene som setter verdien av populatedCountries, largestCountries, og gdpCountries kalles inne i ngOnInit () metode slik at verdiene deres kan brukes så snart komponenten er opprettet.

Opprette hjemmekomponentmalen

Etter å ha skrevet koden for HomeComponent klasse, er det på tide å lage HTML-malen for komponenten. Siden koden inne home.component.html er for det meste HTML, jeg vil bare forklare de kantformede delene. Her er koden for hele filen:

 
Tre mest befolkede land
 
  
 
landsnavn
 
country.population | Nummer
 
Mennesker
 
  
 
 
Tre største land (Område)
 
  
 
landsnavn
 
country.area | nummer km 2 
 
  
 
 
Land med høyeste BNP
 
  
 
landsnavn
 
country.gdp | tall USD
 
  
 
 

Som jeg tidligere har forklart, populatedCountries, largestCountries, og gdpCountries har blitt tilordnet en rekke av Land objekter som deres verdi. Vi bruker NgFor Direktivet går gjennom alle landene i et bestemt utvalg og viser navn og respektive egenskaper. For eksempel, * ngFor = "la landet av befolket land" sløyfer over hele landet gjenstander i populatedCountries array og tilordner den verdien til den lokale variabelen land. Dette direktivet gir også tilsvarende en tag samt alle andre tagger i den for hvert landobjekt inne i populatedCountries array. Den samme forklaringen gjelder for alle landblokkene gjengitt av iterating over largestCountries og gdpCountries.

Vi bruker vinkelrør for å formatere befolkning, område og BNP-verdier for ulike land for å gjøre dem mer lesbare. En ting du kan finne forvirrende er routerLink direktiv som jeg har brukt med alle en tags. Vi vil diskutere det mer detaljert i den siste opplæringen av serien når vi skriver kode for å krysse mellom ulike komponenter eller deler av appen. Verdien av routerLink Direktivet fungerer som en vanlig link som vi kommer over på nettsteder som vi besøker. Den viktige forskjellen er at i stedet for å laste sider, laster vi komponenter.

Opprette CSS-filen for HomeComponent

Til slutt kan du skrive noen CSS for å gjøre HTML-malen mer presentabel. Her er CSS som jeg har brukt til HomeComponent. Husk at denne CSS trenger å gå inn i home.component.css fil.

kropp font-family: 'Lato';  h2, h3, h4, p font-family: 'lato'; margin: 10px;  .country-block p margin-top: 0; margin-bunn: 0;  .country-block h4 margin-bottom: 10px;  h4 posisjon: relativ; fontstørrelse: 1,25rem;  .container margin: 0 50px; tekst-align: center;  .country-enhet bredde: 200px; display: inline-block; margin: 10px;  br klar: begge;  .country-block polstring: 30px 0; tekst-align: center; farge: hvit; høyde: 150px; bakgrunnsfarge: # 795548; border-radius: 2px;  .country-block: svever bakgrunns-farge: # 9C27B0; markør: pointer; Farge: hvit;  

Det er viktig at CSS innsiden home.component.css brukes kun på elementene inne i home.component.html fil.

Du vil kanskje gjengi HomeComponent inne i applikasjonsskallet ved å endre innholdet i app.component.html filen til følgende:

tittel
 

Dessverre får du følgende feil når du prøver å gjøre det:

Kan ikke binde til 'routerLink' siden det ikke er en kjent egenskap av 'a'.

Vi vil snakke mer om routerLink direktiv og hvordan bli kvitt denne feilen i den femte opplæringen i denne serien. Akkurat nå kan du fjerne alle omtaler av routerLink fra home.component.html fil for å kjøre Angular-programmet uten feil. Bare vær sikker på at du legger til alt tilbake til filen.

Siste tanker

Hvis du aldri har opprettet en Angular app før, blir det godt med komponenter som tar litt tid. For enkel å forstå, kan du vurdere komponenter som ligner på ulike iframes lastet inn i en nettside. De .ts filer inneholder logikken for komponenten, akkurat som .js filer inneholder logikken for iframes. 

De .html filer inneholder elementene du vil gjengi i en iframe eller i en komponent, og .css Filene inneholder forskjellige stilregler for disse elementene. Jeg innrømmer at dette ikke er en veldig nøyaktig sammenligning, men det burde hjelpe nybegynnere å gi mening om komponenter og forholdet mellom forskjellige filer av en komponent.

I den neste opplæringen vil vi opprette to komponenter som hjelper deg med å forstå komponentene tydeligere. Hvis du har spørsmål om koden relatert til HomeComponent, vennligst gi meg beskjed i kommentarene.