Share
Nel terzo tutorial della serie, hai imparato come creare l'HomeComponent della tua app di informazioni sul paese. Creeremo altri due componenti in questo tutorial. Uno dei componenti elencherà tutti i paesi che abbiamo archiviato nel PAESI array. Un altro componente mostrerà i dettagli di qualsiasi paese selezionato dall'utente.
Il HomeComponent che abbiamo creato nel tutorial precedente e il AllCountriesComponent che creeremo in questa sezione sono molto simili. L'unica differenza è che invece di ordinare il PAESI array e affettandolo per ottenere solo i primi tre paesi, li elenceremo tutti in una volta. All'interno della console, passare alla directory del progetto ed eseguire il seguente comando:
ng genera componenti tutti i paesi
Questo creerà una cartella chiamata tutti i paesi dentro il src / app directory della tua app Angolare. La cartella avrà tre diversi file chiamati tutti-countries.component.ts, all-countries.component.html, e all-countries.component.css. La logica del componente come ottenere l'elenco dei paesi e inizializzare il componente stesso entrerà nel .ts file. Il .html il file memorizzerà il modello per il componente e il file .css il file memorizzerà diverse regole CSS per modellare il modello.
Ecco il codice per il tutti-countries.component.ts file:
import Component, OnInit da '@ angular / core'; importa Paese da '... / Paese'; import CountryService da '... /country.service'; @Component (selector: 'app-all-countries', templateUrl: './all-countries.component.html', styleUrls: ['./all-countries.component.css']) classe di esportazione AllCountriesComponent implementa OnInit countries: Country []; costruttore (private countryService: CountryService) ngOnInit () this.getCountries (); getCountries (): void this.countries = this.countryService.getCountries ();
Come puoi vedere, il codice è piuttosto semplice. Importiamo il Nazione e CountryService classi che abbiamo creato nel secondo tutorial della serie. Il decoratore di componenti è usato per specificare il selettore che useremo per identificare il AllCountriesComponent.
All'interno della definizione della classe, creiamo a paesi proprietà che accetta un array di Nazione oggetti come il suo valore. Il CountryService la classe viene aggiunta al componente mediante l'iniezione delle dipendenze. Chiamiamo il getCountries () metodo di questa classe al momento dell'inizializzazione. Il getCountries () il metodo stesso si basa su getCountries () dal CountryService classe, che restituisce un array di Nazione oggetti.
Il all-countries.component.html il file memorizzerà il modello per il nostro componente.
Elenco di tutti i paesi nel nostro database
nome del paese
Capitale
(Country.capital)
Proprio come il modello per HomeComponent, stiamo usando * ngFor elencare tutti i paesi ottenuti dal getCountries () metodo e memorizzati nel paesi proprietà del AllCountriesComponent classe. Usiamo questo componente per visualizzare le capitali di diversi paesi utilizzando il capitale proprietà. Imparerai a conoscere il routerLink direttiva usata con un tag nel prossimo tutorial.
Il CSS usato è lo stesso di quello di home.component.css file. L'unica differenza è che cambiamo il colore di sfondo per ogni blocco di paese in verde. Ecco il codice CSS completo:
a decorazione del testo: nessuna; *, *: after, *: before box-sizing: border-box; body font-family: 'Lato'; h2, h3, h4, p font-family: 'Lato'; margine: 10px; .country-block p margin-top: 0; margin-bottom: 0; .country-block h4 margin-bottom: 10px; h4 position: relativo; font-size: 1.25rem; .container margin: 0 50px; allineamento del testo: centro; .country-unit width: 200px; display: blocco in linea; margine: 10px; br clear: both; .country-block padding: 30px 0; allineamento del testo: centro; colore bianco; altezza: 150 px; background-color: # 4CAF50; border-radius: 2px; .country-block: hover background-color: # FF5722; cursore: puntatore; colore bianco;
Il CountryDetailComponent sarà la terza e ultima componente della nostra app Angular. Ogni volta che gli utenti fanno clic sul nome di qualsiasi paese elencato all'interno del HomeComponent o AllCountriesComponent, saranno portati al CountryDetailComponent.
Torna alla console ed esegui il seguente comando:
ng genera il dettaglio del paese del componente
Questo creerà una cartella chiamata country-detail dentro il src / app directory della tua app. Dovresti vedere quattro file diversi all'interno della cartella. Tre di questi file saranno denominati: country-detail.component.ts, country-detail.component.html, e country-detail.component.css. Proprio come i componenti precedenti, country-detail.component.ts conterrà la logica del nostro componente, e country-detail.component.html conterrà il modello per renderlo.
Ecco il codice per il country-detail.component.ts file:
Accentsconagua
import Component, OnInit da '@ angular / core'; import ActivatedRoute da '@ angular / router'; import Location da '@ angular / common'; importa Paese da '... / Paese'; import CountryService da '... /country.service'; @Component (selector: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css']) classe di esportazione CountryDetailComponent implementa OnInit Paese: Paese; costruttore (route privata: ActivatedRoute, private countryService: CountryService, private location: Location) ngOnInit (): void this.getCountry (); getCountry (): void const name: string = this.route.snapshot.paramMap.get ('name'); this.country = this.countryService.getCountry (nome); goBack (): void this.location.back (); Questa volta, abbiamo anche importato ActivatedRoute e Location, insieme a Componente e OnInit. Noi usiamo ActivatedRoute per accedere a informazioni su un percorso associato a un componente caricato in una presa. Noi usiamo Posizione per consentire alla nostra applicazione di interagire con l'URL del browser.
All'interno della definizione della classe, creiamo una proprietà denominata nazione che accetta un Nazione oggetto come il suo valore. diversamente da HomeComponent e AllCountriesComponent, il CountryDetailComponent la classe deve mostrare i dettagli di un solo paese alla volta.
Il getCountry () metodo estrae il nome parametro dall'istantanea del percorso e utilizza il valore per trovare un paese con il nome specificato all'interno del PAESI array. Il torna indietro() metodo riporta l'utente alla pagina precedente con l'aiuto di indietro() metodo dal Posizione classe.
Ecco il codice per il country-detail.component.html file:
country.name | lettere maiuscole
Capitale: Country.capital
La zona: country.area | numero km 2
Popolazione: country.population | numero
PIL: country.gdp | numero USD
Moneta: Country.currency
Il codice del modello all'interno del div con * NgIf = "paese" è reso solo se nazione è stato impostato su un valore. Utilizziamo tubi angolari per capitalizzare il nome del paese e formattare correttamente l'area e la popolazione dei paesi. Stiamo vincolando l'evento click del nostro Torna indietro pulsante per il torna indietro() metodo del nostro componente in modo che ogni volta che gli utenti fanno clic su un pulsante, vengono riportati alla pagina precedente.
Ecco il CSS che andrà nel country-detail.component.css file:
.container margin: 0 auto; larghezza: 380 px; h2, p font-family: 'Lato'; p font-size: 1.25rem; p span color: # 4CAF50; border-radius: 5px; larghezza: 200 px; display: blocco in linea; label display: inline-block; larghezza: 3em; margine: .5em 0; colore: # 607D8B; font-weight: bold; font-family: 'Lato'; pulsante margin-top: 20px; font-family: Arial; background-color: # F44336; confine: nessuno; imbottitura: 5px 10px; border-radius: 20px; cursore: puntatore; contorni: nessuno; colore bianco; font-family: 'Lato';
Con il completamento di questo tutorial, abbiamo aggiunto altri due componenti alla nostra prima app Angular. Il AllCountriesComponent era molto simile al HomeComponent come entrambi hanno reso un elenco di paesi memorizzati nel PAESI array. Il CountryDetailComponent era diverso perché estraeva informazioni su un singolo paese dal PAESI array basato sul suo nome.
Dopo aver creato tre diversi componenti, ora dovresti avere una conoscenza di base delle interazioni tra .ts, .html, e .css file per creare un componente pienamente funzionante.
Nel prossimo tutorial della serie, imparerai come utilizzare tutti questi componenti insieme e apportare alcune modifiche finali in modo che l'app possa essere eseguita senza errori.
