Share
I den tredje opplæringen av serien lærte du hvordan du oppretter hjemmekomponenten til landinformasjonen din. Vi vil lage to deler i denne opplæringen. En av komponentene vil liste opp alle landene vi har lagret i LAND array. En annen komponent vil vise detaljene til hvilket land som er valgt av brukeren.
De HomeComponent som vi opprettet i den forrige opplæringen og i AllCountriesComponent som vi vil skape i denne delen, er svært like. Den eneste forskjellen er at i stedet for å sortere LAND array og skiver den for å bare få de tre første landene, vil vi liste dem alle samtidig. Gå inn i konsollen din i konsollen, og kjør følgende kommando:
ng generere komponent alle land
Dette vil opprette en mappe som heter alle land inne i src / app katalog av Angular app. Mappen vil ha tre forskjellige filer som heter alle-countries.component.ts, all-countries.component.html, og all-countries.component.css. Komponentlogikken som å få listen over land og initialisere komponenten selv vil gå inn i .ts fil. De .html filen lagrer malen for komponenten, og .css filen lagrer forskjellige CSS-regler for å utforme malen.
Her er koden for alle-countries.component.ts fil:
importer Komponent, OnInit fra '@ vinkel / kjerne'; importer Country fra '... / country'; importer CountryService fra '... /country.service'; @Component (selector: 'app-all-countries', templateUrl: './all-countries.component.html', styleUrls: ['./all-countries.component.css']) eksportklasse AllCountriesComponent implementerer OnInit land: land []; Konstruktør (privat landService: CountryService) ngOnInit () this.getCountries (); getCountries (): void this.countries = this.countryService.getCountries ();
Som du kan se, er koden ganske enkel. Vi importerer Land og CountryService klasser som vi opprettet i den andre opplæringen av serien. Komponenten dekoratøren brukes til å spesifisere väljeren som vi skal bruke for å identifisere AllCountriesComponent.
Inne i klassedisplayet oppretter vi en land eiendom som aksepterer en rekke av Land gjenstander som sin verdi. De CountryService Klassen legges til komponenten ved hjelp av avhengighetsinjeksjon. Vi kaller getCountries () metode for denne klassen ved initialisering. De getCountries () Metoden selv er avhengig av getCountries () fra CountryService klassen, som returnerer en rekke av Land objekter.
De all-countries.component.html filen lagrer malen for komponenten vår.
Liste over alle landene i vår database
landsnavn
Hovedstad
(Country.capital)
Akkurat som malen for HomeComponent, vi bruker * ngFor å liste alle landene som er oppnådd av getCountries () metode og lagret i land eiendom av AllCountriesComponent klasse. Vi bruker denne komponenten til å vise hovedstader i ulike land ved hjelp av hovedstad eiendom. Du vil lære om routerLink Direktivet brukes med en tag i neste opplæring.
CSS brukt er det samme som for home.component.css fil. Den eneste forskjellen er at vi endrer bakgrunnsfargen for hvert lands blokk til grønt. Her er den komplette CSS-koden:
en tekst-dekorasjon: ingen; *, *: etter, *: før boks størrelse: grense-boksen; 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: # 4CAF50; border-radius: 2px; .country-block: svever bakgrunnsfarge: # FF5722; markør: pointer; Farge: hvit;
De CountryDetailComponent vil være den tredje og siste delen av vår Angular app. Når brukere klikker på navnet på et hvilket som helst land som er oppført i enten HomeComponent eller AllCountriesComponent, de vil bli tatt til CountryDetailComponent.
Gå tilbake til konsollen og kjør følgende kommando:
ng generere komponent land-detalj
Dette vil opprette en mappe som heter country-detalj inne i src / app katalog over appen din. Du bør se fire forskjellige filer i mappen. Tre av disse filene vil bli kalt: country-detail.component.ts, country-detail.component.html, og country-detail.component.css. Akkurat som de tidligere komponentene, country-detail.component.ts vil inneholde logikken til vår komponent, og country-detail.component.html vil inneholde malen for å gjengi den.
Her er koden for country-detail.component.ts fil:
Accentsconagua
importer Komponent, OnInit fra '@ vinkel / kjerne'; importer ActivatedRoute fra '@ vinkel / router'; importer Sted fra '@ vinkel / vanlig'; importer Country fra '... / country'; importer CountryService fra '... /country.service'; @Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css']) eksportklasse CountryDetailComponent implementerer OnInit land: land; konstruktør (privat rute: ActivatedRoute, privat landService: CountryService, privat sted: Sted) ngOnInit (): void this.getCountry (); getCountry (): void const name: string = this.route.snapshot.paramMap.get ('navn'); this.country = this.countryService.getCountry (navn); goBack (): void this.location.back (); Denne gangen har vi også importert ActivatedRoute og Location, sammen med Komponent og OnInit. Vi bruker ActivatedRoute for å få tilgang til informasjon om en rute tilknyttet en komponent lastet i en stikkontakt. Vi bruker plassering for å gjøre det mulig for vår applikasjon å samhandle med nettleserens URL.
I klassedisisjonen oppretter vi en eiendom som heter land som aksepterer a Land objekt som sin verdi. I motsetning til HomeComponent og AllCountriesComponent, de CountryDetailComponent klassen må vise detaljer om bare ett land av gangen.
De getCountry () metoden trekker ut Navn parameter fra rutens øyeblikksbilde og bruker verdien til å finne et land med det oppgitte navnet inne i LAND array. De gå tilbake() Metode tar brukeren tilbake til forrige side ved hjelp av tilbake() metode fra plassering klasse.
Her er koden for country-detail.component.html fil:
country.name | stor bokstav
Hovedstad: Country.capital
Område: country.area | nummer km 2
Befolkning: country.population | Nummer
BNP: country.gdp | tall USD
Valuta: Country.currency
Malen koden inne i div med * NgIf = "land" gjengis bare hvis land har blitt satt til en verdi. Vi bruker vinklede rør for å kapitalisere navnet på landet og formatere land og befolkning på landene riktig. Vi er bindende klikkhendelse av vår Gå tilbake knappen til gå tilbake() metode for vår komponent slik at når brukere klikker på en knapp, blir de tatt tilbake til forrige side.
Her er CSS som vil gå inn i country-detail.component.css fil:
.container margin: 0 auto; bredde: 380px; h2, p font-family: 'Lato'; p font-size: 1.25rem; p span color: # 4CAF50; border-radius: 5px; bredde: 200px; display: inline-block; etikett display: inline-block; bredde: 3em; margin: .5em 0; farge: # 607D8B; font-weight: bold; font-familie: 'Lato'; knappen margin-top: 20px; font-familie: Arial; bakgrunnsfarge: # F44336; grense: ingen; polstring: 5px 10px; border-radius: 20px; markør: pointer; oversikt: ingen; farge: hvit; font-familie: 'Lato';
Ved gjennomføringen av denne opplæringen har vi lagt til to deler til vår første Angular-app. De AllCountriesComponent var veldig lik den HomeComponent som de begge gjengitt en liste over land lagret i LAND array. De CountryDetailComponent var annerledes fordi det hentet informasjon om et enkelt land fra LAND array basert på navnet sitt.
Etter å ha opprettet tre forskjellige komponenter, bør du nå ha en grunnleggende forståelse av samspillet mellom .ts, .html, og .css filer for å lage en fullt fungerende komponent.
I neste veiledning i serien lærer du hvordan du bruker alle disse komponentene sammen og gjør noen endringer slik at appen kan løpe uten feil.
