Share
De tweede zelfstudie van deze serie heeft je geleerd hoe je gegevens kunt opslaan in de Angular-app en deze kunt openen met behulp van een serviceklasse. In deze zelfstudie maken we de HomeComponent voor onze Angular-app.
De startpagina of de HomeComponent dat we maken, zal de top drie van landen in verschillende categorieën zoals bevolking en gebied vermelden. De gegevens om de sorteervolgorde te bepalen, worden overgenomen uit de LANDEN array die we in de vorige zelfstudie hebben gemaakt.
Om de te maken HomeComponent, verander de map in de console naar uw app-map en voer de volgende opdracht uit:
ng component home genereren
Hiermee wordt een map gemaakt met de naam Home in de src / app map met vier bestanden erin. Voor deze app hoeven we ons alleen bezig te houden met drie genoemde bestanden home.component.ts, home.component.css, en home.component.html. De home.component.ts bestand bevat alle logica voor de component en de CSS- en HTML-bestanden regelen het uiterlijk en de structuur van de component.
Laten we beginnen met het bewerken van de home.component.ts het dossier. De HomeComponent wordt verondersteld de top drie van meest bevolkte landen, de drie grootste landen, en de drie landen met het hoogste BBP opgeslagen in de LANDEN rangschikking.
We zullen beide importeren land klasse en de CountryService klas die we hebben gemaakt in de laatste zelfstudie. We zullen ook importeren bestanddeel en OnInit van @ Hoekige / kern. De OnInit afhankelijkheid biedt een levenscyclushaak die direct wordt genoemd nadat gegevensgebonden eigenschappen van een richtlijn zijn geïnitialiseerd.
Na het importeren van alle benodigde afhankelijkheden, zullen we onze component-decorateur definiëren. De component-decorateur wordt gebruikt om de nodige metadata-informatie te leveren met betrekking tot onze component. We zullen een waarde instellen voor de keuzeschakelaar, templateUrl, en styleUrls in de binnenhuisarchitect.
De selector wordt gebruikt om de tag te specificeren die zal worden gebruikt om onze component te identificeren. De templateUrl wordt gebruikt om de URL op te geven voor de sjabloon die wordt weergegeven wanneer Angular de opgegeven selector tegenkomt. De styleUrls eigenschap wordt gebruikt om verschillende stijlbladen op te geven die moeten worden toegepast op de opgegeven sjabloon. Hier is de code erin home.component.ts tot dit punt:
importeer Component, OnInit uit '@ angular / core'; importeer Land van '... / land'; importeer CountryService van '... /country.service'; @Component (selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.css'])
Nu gaan we beginnen met het definiëren van de HomeComponent klas met verschillende eigenschappen en methoden om ons te helpen de landgegevens aan gebruikers te tonen. De HomeComponent klasse heeft drie verschillende eigenschappen, die een reeks landen als hun waarde accepteren. We kunnen een afhankelijkheid in de constructor van de component injecteren door een constructorfactor met het afhankelijkheidstype op te geven. Dat is hoe we het zullen injecteren CountryService klas binnen onze HomeComponent.
Hier is de rest van de code voor de home.component.ts het dossier:
exportklasse HomeComponent implementeert OnInit ingevuldLanden: Land [] = []; largestCountries: Land [] = []; gdpCountries: Land [] = []; constructor (private countryService: 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 ();
We hebben drie methoden gemaakt die de gebruiken CountryService klasse om de landen met het grootste gebied, de hoogste bevolking en het hoogste BBP te krijgen. De reeksen geretourneerd door verschillende CountryService methoden worden vervolgens toegewezen aan de overeenkomstige eigenschappen van de HomeComponent klasse.
Houd er rekening mee dat al deze methoden de waarde van instellen populatedCountries, largestCountries, en gdpCountries worden binnen de ngOnInit () methode zodat hun waarden kunnen worden gebruikt zodra het onderdeel is gemaakt.
Na het schrijven van de code voor de HomeComponent klasse, is het tijd om de HTML-sjabloon voor de component te maken. Omdat de code erin zit home.component.html is meestal HTML, ik zal alleen de hoekspecifieke delen uitleggen. Hier is de code voor het hele bestand:
Drie meest bevolkte landen
naam van het land
country.population | aantal
Mensen
Drie grootste landen (gebied)
naam van het land
country.area | nummer km 2
Landen met het hoogste bbp
naam van het land
country.gdp | nummer USD
Zoals ik eerder heb uitgelegd, de populatedCountries, largestCountries, en gdpCountries aan een array is toegewezen land objecten als hun waarde. We gebruiken de NgFor om alle landen in een specifieke array door te lussen en hun namen en respectieve eigenschappen te tonen. Bijvoorbeeld, * ngFor = "laat het land van de bevolkte landen" Loopt over alle landobjecten binnen de populatedCountries array en wijst die waarde toe aan de lokale variabele land. Deze richtlijn geeft ook het overeenkomstige weer een tag en alle andere tags erin voor elk landobject in de populatedCountries matrix. Dezelfde uitleg geldt voor alle landblokken die worden weergegeven door opnieuw te herhalen largestCountries en gdpCountries.
We gebruiken Hoekige pijpen om de populatie-, gebieds- en BBP-waarden voor verschillende landen op de juiste manier op te maken, zodat ze leesbaarder worden. Een ding dat je misschien verwarrend vindt, is het routerLink richtlijn die ik heb gebruikt met alle een -tags. We zullen het in meer detail bespreken in de laatste zelfstudie van de serie wanneer we code schrijven om door verschillende componenten of secties van de app te gaan. De waarde van de routerLink richtlijn fungeert als een normale link die we tegenkomen op websites die we bezoeken. Het belangrijke verschil is dat in plaats van het laden van pagina's, we componenten laden.
Ten slotte kunt u enkele CSS schrijven om de HTML-sjabloon representatiever te maken. Hier is de CSS die ik heb gebruikt voor de HomeComponent. Houd er rekening mee dat deze CSS binnen de. Moet gaan home.component.css het dossier.
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: # 795548; grensradius: 2px; . country-block: hover background-colour: # 9C27B0; cursor: pointer; kleur wit;
Het is belangrijk dat de CSS erin zit home.component.css wordt alleen toegepast op de elementen binnen de home.component.html het dossier.
Misschien wil je renderen HomeComponent in de toepassingsshell door de inhoud van de app.component.html bestand naar het volgende:
titel
Helaas krijgt u de volgende foutmelding wanneer u dit probeert:
Kan niet binden aan 'routerLink' omdat het geen bekende eigenschap van 'a' is.
We zullen meer praten over de routerLink richtlijn en hoe deze fout te verwijderen in de vijfde zelfstudie van deze serie. Op dit moment kun je alle vermeldingen van verwijderen routerLink van de home.component.html bestand om uw Angular-toepassing zonder fouten uit te voeren. Zorg ervoor dat u alles weer aan het bestand toevoegt.
Als u nog nooit eerder een Angular-app hebt gemaakt, kost het enige tijd om vertrouwd te raken met componenten. Voor een beter begrip kunt u componenten overwegen die lijken op verschillende iframes die in een webpagina zijn geladen. De .ts bestanden bevatten de logica voor het onderdeel, net als .js bestanden bevatten de logica voor iframes.
De .html Bestanden bevatten de elementen die u wilt renderen in een iframe of in een component, en de .css bestanden bevatten verschillende stijlregels voor die elementen. Ik geef toe dat dit geen zeer nauwkeurige vergelijking is, maar het zou beginners moeten helpen bij het begrijpen van componenten en de relatie tussen verschillende bestanden van een component.
In de volgende tutorial zullen we nog twee componenten maken die je helpen om componenten beter te begrijpen. Als u vragen hebt over de betreffende code HomeComponent, laat het me weten in de comments.
Accentsconagua