Share
In de derde zelfstudie van de serie hebt u geleerd hoe u de HomeComponent van uw landinformatie-app maakt. We zullen in deze tutorial nog twee componenten maken. Een van de componenten zal een lijst maken van alle landen die we hebben opgeslagen in de LANDEN matrix. Een ander onderdeel geeft de details weer van elk land dat door de gebruiker is geselecteerd.
De HomeComponent die we hebben gemaakt in de vorige tutorial en de AllCountriesComponent die we in deze sectie zullen maken lijken erg op elkaar. Het enige verschil is dat in plaats van het sorteren van LANDEN array en het opdelen om alleen de eerste drie landen te krijgen, we zullen ze allemaal tegelijk vermelden. Ga in de console naar uw projectdirectory en voer de volgende opdracht uit:
ng component-alle landen genereren
Hiermee wordt een map met de naam gemaakt alle landen binnen in de src / app map van uw Angular app. De map bevat drie verschillende bestanden met de naam all-countries.component.ts, all-countries.component.html, en all-countries.component.css. De componentlogica, zoals het krijgen van de lijst met landen en het initialiseren van het onderdeel zelf, gaat naar binnen .ts het dossier. De .html bestand zal de sjabloon voor de component opslaan, en de .css bestand zal verschillende CSS-regels opslaan om de sjabloon te stylen.
Hier is de code voor de all-countries.component.ts het dossier:
importeer Component, OnInit uit '@ angular / core'; importeer Land van '... / land'; importeer CountryService van '... /country.service'; @Component (selector: 'app-all-countries', templateUrl: './all-countries.component.html', styleUrls: ['./all-countries.component.css']) exportklasse AllCountriesComponent implementeert OnInit landen: land []; constructor (private countryService: CountryService) ngOnInit () this.getCountries (); getCountries (): void this.countries = this.countryService.getCountries ();
Zoals je kunt zien, is de code behoorlijk eenvoudig. We importeren het land en CountryService klassen die we hebben gemaakt in de tweede zelfstudie van de serie. De component-decorateur wordt gebruikt om de selector te specificeren die we zullen gebruiken om de AllCountriesComponent.
Binnen de klassedefinitie maken we een landen eigenschap die een reeks van accepteert land objecten als zijn waarde. De CountryService klasse wordt toegevoegd aan de component met behulp van afhankelijkheid injectie. We noemen het getCountries () methode van deze klasse bij initialisatie. De getCountries () methode zelf getCountries () van de CountryService klasse, die een array van retourneert land voorwerpen.
De all-countries.component.html bestand zal de sjabloon voor onze component opslaan.
Lijst van alle landen in onze database
naam van het land
Hoofdstad
(Country.capital)
Net zoals de sjabloon voor HomeComponent, wij gebruiken * ngFor om alle landen opgesomd door de getCountries () methode en opgeslagen in de landen eigendom van de AllCountriesComponent klasse. We gebruiken dit onderdeel om de hoofdletters van verschillende landen weer te geven met behulp van de hoofdstad eigendom. Je leert over de routerLink richtlijn gebruikt met de een tag in de volgende zelfstudie.
De gebruikte CSS is dezelfde als die van de home.component.css het dossier. Het enige verschil is dat we de achtergrondkleur voor elk landblok in groen veranderen. Hier is de volledige CSS-code:
een text-decoration: none; *, *: after, *: before box-sizing: border-box; body font-family: 'Lato'; h2, h3, h4, p font-family: 'Lato'; marge: 10px; .country-block p margin-top: 0; marge-bodem: 0; .landblok h4 margin-bottom: 10px; h4 positie: relatief; lettergrootte: 1.25rem; .container margin: 0 50px; text-align: center; .country-unit width: 200px; weergave: inline-block; marge: 10px; br clear: both; . country-block padding: 30px 0; text-align: center; kleur wit; hoogte: 150 px; achtergrondkleur: # 4CAF50; grensradius: 2px; .country-block: hover background-colour: # FF5722; cursor: pointer; kleur wit;
De CountryDetailComponent wordt het derde en laatste onderdeel van onze Angular-app. Telkens wanneer gebruikers op de naam van elk land klikken dat in de HomeComponent of AllCountriesComponent, ze zullen worden meegenomen naar de CountryDetailComponent.
Ga terug naar de console en voer de volgende opdracht uit:
ng component-detail genereren
Hiermee wordt een map met de naam gemaakt country-detail binnen in de src / app directory van uw app. Je zou vier verschillende bestanden in de map moeten zien. Drie van die bestanden krijgen de naam: country-detail.component.ts, country-detail.component.html, en country-detail.component.css. Net als de eerdere componenten, country-detail.component.ts bevat de logica van onze component, en country-detail.component.html bevat de sjabloon om deze weer te geven.
Hier is de code voor de country-detail.component.ts het dossier:
Accentsconagua
importeer Component, OnInit uit '@ angular / core'; importeer ActivatedRoute van '@ angular / router'; importeer Locatie uit '@ angular / common'; importeer Land van '... / land'; importeer CountryService van '... /country.service'; @Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css']) exportklasse CountryDetailComponent implementeert OnInit land: Land; constructor (privéroute: ActivatedRoute, privélandService: CountryService, privélocatie: Locatie) ngOnInit (): void this.getCountry (); getCountry (): void const name: string = this.route.snapshot.paramMap.get ('name'); this.country = this.countryService.getCountry (name); goBack (): void this.location.back (); Deze keer hebben we ook ActivatedRoute en Location geïmporteerd, samen met bestanddeel en OnInit. We gebruiken ActivatedRoute voor toegang tot informatie over een route die is gekoppeld aan een component die in een outlet is geladen. We gebruiken Plaats om onze applicatie in staat te stellen interactie te hebben met de URL van de browser.
Binnen de klassedefinitie maken we een eigenschap met de naam land welke accepteert een land object als zijn waarde. anders HomeComponent en AllCountriesComponent, de CountryDetailComponent klas moet de details van slechts één land tegelijk tonen.
De getCountry () methode haalt het naam parameter uit de momentopname van de route en gebruikt de waarde om een land te vinden met de opgegeven naam in de LANDEN matrix. De ga terug() methode brengt de gebruiker terug naar de vorige pagina met behulp van de terug() methode van de Plaats klasse.
Hier is de code voor de country-detail.component.html het dossier:
country.name | hoofdletters
Hoofdstad: Country.capital
Gebied: country.area | nummer km 2
Bevolking: country.population | aantal
BBP: country.gdp | nummer USD
Valuta: Country.currency
De sjablooncode in de div met * NgIf = "land" wordt alleen weergegeven als land is ingesteld op een waarde. We gebruiken Hoekige pijpen om de naam van het land te kapitaliseren en het gebied en de bevolking van de landen op de juiste manier in te delen. We binden de klikgebeurtenis van onze Ga terug knop naar de ga terug() methode van onze component, zodat wanneer gebruikers op een knop klikken, ze worden teruggebracht naar de vorige pagina.
Hier is de CSS die in de. Zal gaan country-detail.component.css het dossier:
.container margin: 0 auto; breedte: 380 px; h2, p font-family: 'Lato'; p font-size: 1.25rem; p span color: # 4CAF50; grensradius: 5px; breedte: 200 px; weergave: inline-block; label display: inline-block; breedte: 3em; marge: .5em 0; kleur: # 607D8B; lettertype: vet; font-family: 'Lato'; -knop margin-top: 20px; lettertype-familie: Arial; achtergrondkleur: # F44336; rand: geen; opvulling: 5px 10px; grensradius: 20px; cursor: pointer; overzicht: geen; kleur wit; font-family: 'Lato';
Met de voltooiing van deze tutorial hebben we nog twee componenten toegevoegd aan onze eerste Angular-app. De AllCountriesComponent leek erg op de HomeComponent omdat ze allebei een lijst met landen opgeslagen in de LANDEN matrix. De CountryDetailComponent was anders omdat het informatie over een enkel land uit de LANDEN array op basis van de naam.
Nadat u drie verschillende componenten hebt gemaakt, moet u nu een basiskennis hebben van de interacties tussen .ts, .html, en .css bestanden om een volledig functionerende component te maken.
In de volgende zelfstudie van de serie leert u hoe u al deze componenten samen gebruikt en enkele definitieve wijzigingen aanbrengt, zodat de app zonder fouten kan worden uitgevoerd.
