Share
Dans le troisième tutoriel de la série, vous avez appris à créer le composant Accueil de l'application d'informations sur votre pays. Nous allons créer deux autres composants dans ce tutoriel. L’un des composants listera tous les pays que nous avons stockés dans le DES PAYS tableau. Un autre composant affichera les détails de tout pays sélectionné par l'utilisateur.
le AccueilComposant que nous avons créé dans le tutoriel précédent et le Tous les paysComposant que nous allons créer dans cette section sont très similaires. La seule différence est qu'au lieu de trier les DES PAYS tableau et le découper pour n’obtenir que les trois premiers pays, nous les répertorierons tous en même temps. Dans la console, accédez au répertoire de votre projet et exécutez la commande suivante:
ng générer tous les pays composant
Cela va créer un dossier nommé tous les pays à l'intérieur de src / app répertoire de votre application angulaire. Le dossier aura trois fichiers différents nommés all-countries.component.ts, all-countries.component.html, et all-countries.component.css. La logique de composant comme obtenir la liste des pays et initialiser le composant lui-même ira à l'intérieur du .ts fichier. le .html fichier stockera le modèle pour le composant, et le .css fichier stockera différentes règles CSS pour styler le modèle.
Voici le code pour le all-countries.component.ts fichier:
importer Component, OnInit à partir de '@ angular / core'; importer Pays de '… / pays'; importer CountryService de '… /country.service'; @Component (sélecteur: 'app-tous-pays', templateUrl: './all-countries.component.html', styleUrls: ['./all-countries.component.css']) la classe d'exportation AllCountriesComponent implémente OnInit pays: pays []; constructeur (private countryService: CountryService) ngOnInit () this.getCountries (); getCountries (): void this.countries = this.countryService.getCountries ();
Comme vous pouvez le constater, le code est assez basique. Nous importons le Pays et CountryService les classes que nous avons créées dans le deuxième tutoriel de la série. Le composant décorateur est utilisé pour spécifier le sélecteur que nous utiliserons pour identifier le Tous les paysComposant.
Dans la définition de la classe, nous créons un des pays propriété qui accepte un tableau de Pays objets comme sa valeur. le CountryService La classe est ajoutée au composant à l'aide de l'injection de dépendance. Nous appelons le getCountries () méthode de cette classe à l’initialisation. le getCountries () la méthode elle-même repose sur getCountries () du CountryService classe, qui retourne un tableau de Pays objets.
le all-countries.component.html fichier va stocker le modèle pour notre composant.
Liste de tous les pays de notre base de données
nom du pays
Capitale
(country.capital)
Tout comme le modèle pour AccueilComposant, nous utilisons * ngFor d'énumérer tous les pays obtenus par le getCountries () méthode et stocké dans le des pays propriété du Tous les paysComposant classe. Nous utilisons cette composante pour afficher les capitales de différents pays en utilisant le Capitale propriété. Vous en apprendrez plus sur le routerLink directive utilisée avec une tag dans le prochain tutoriel.
Le CSS utilisé est le même que celui de la home.component.css fichier. La seule différence est que nous changeons la couleur d'arrière-plan de chaque bloc de pays en vert. Voici le code CSS complet:
une text-decoration: none; *, *: après, *: avant taille de la boîte: border-box; body font-family: 'Lato'; h2, h3, h4, p font-family: 'Lato'; marge: 10px; .country-block p marge-top: 0; marge inférieure: 0; .country-block h4 margin-bottom: 10px; h4 position: relative; taille de la police: 1.25rem; .container margin: 0 50px; text-align: center; .country-unit width: 200px; affichage: inline-block; marge: 10px; br clear: les deux; .country-block padding: 30px 0; text-align: center; Couleur blanche; hauteur: 150px; couleur de fond: # 4CAF50; border-radius: 2px; .country-block: survoler background-color: # FF5722; curseur: pointeur; Couleur blanche;
le CountryDetailComponent sera le troisième et dernier composant de notre application angulaire. Chaque fois que les utilisateurs cliquent sur le nom d’un pays figurant dans la liste. AccueilComposant ou Tous les paysComposant, ils seront emmenés au CountryDetailComponent.
Retournez à la console et exécutez la commande suivante:
ng générer des informations détaillées par pays
Cela va créer un dossier nommé détail du pays à l'intérieur de src / app répertoire de votre application. Vous devriez voir quatre fichiers différents dans le dossier. Trois de ces fichiers seront nommés: country-detail.component.ts, country-detail.component.html, et country-detail.component.css. Tout comme les composants précédents, country-detail.component.ts contiendra la logique de notre composant, et country-detail.component.html contiendra le modèle pour le rendre.
Voici le code pour le country-detail.component.ts fichier:
Accentsconagua
importer Component, OnInit à partir de '@ angular / core'; importer ActivatedRoute depuis '@ angular / router'; importer Emplacement depuis '@ angular / common'; importer Pays de '… / pays'; importer CountryService de '… /country.service'; @Component (sélecteur: 'app-country-detail', templateUrl: './country-detail.component.html', styleUrls: ['./country-detail.component.css']), la classe d'exportation CountryDetailComponent implémente OnInit pays: pays; constructeur (route privée: ActivatedRoute, countryService privé: CountryService, emplacement privé: Location) ngOnInit (): void this.getCountry (); getCountry (): void nom const: string = this.route.snapshot.paramMap.get ('nom'); this.country = this.countryService.getCountry (name); goBack (): void this.location.back (); Cette fois, nous avons également importé ActivatedRoute et Location, ainsi que Composant et OnInit. Nous utilisons ActivatedRoute accéder à des informations sur une route associée à un composant chargé dans une prise. Nous utilisons Emplacement pour permettre à notre application d'interagir avec l'URL du navigateur.
Dans la définition de classe, nous créons une propriété nommée pays qui accepte un Pays objet comme valeur. contrairement à AccueilComposant et Tous les paysComposant, la CountryDetailComponent la classe doit montrer les détails d'un seul pays à la fois.
le getCountry () méthode extrait les prénom paramètre de l'instantané de route et utilise la valeur pour trouver un pays avec le nom donné à l'intérieur du DES PAYS tableau. le retourner() Cette méthode ramène l'utilisateur à la page précédente à l'aide de l'outil retour() méthode de la Emplacement classe.
Voici le code pour le country-detail.component.html fichier:
country.name | majuscule
Capitale: country.capital
Surface: country.area | nombre km 2
Population: pays.population | nombre
PIB: pays.gdp | numéro USD
Devise: country.currency
Le code de modèle à l'intérieur du div avec * ngIf = "pays" est rendu que si pays a été défini sur une valeur. Nous utilisons des pipes angulaires pour mettre en majuscule le nom du pays et formater correctement la superficie et la population des pays. Nous lions l’événement clic de notre Retourner bouton au retourner() méthode de notre composant afin que chaque fois que les utilisateurs cliquent sur un bouton, ils sont ramenés à la page précédente.
Voici le CSS qui ira à l'intérieur du country-detail.component.css fichier:
.conteneur marge: 0 auto; largeur: 380px; h2, p font-family: 'Lato'; p taille de la police: 1.25rem; p span color: # 4CAF50; border-radius: 5px; largeur: 200px; affichage: inline-block; label display: inline-block; largeur: 3em; marge: 0,5 m 0; couleur: # 607D8B; poids de police: gras; famille de polices: 'Lato'; bouton margin-top: 20px; famille de polices: Arial; couleur de fond: # F44336; bordure: aucune; rembourrage: 5px 10px; border-radius: 20px; curseur: pointeur; contour: aucun; Couleur blanche; famille de polices: 'Lato';
Avec l'achèvement de ce tutoriel, nous avons ajouté deux composants supplémentaires à notre première application Angular. le Tous les paysComposant était très similaire à la AccueilComposant comme ils ont tous deux rendu une liste de pays stockés dans le DES PAYS tableau. le CountryDetailComponent était différent car il extrayait des informations sur un seul pays de la DES PAYS tableau basé sur son nom.
Après avoir créé trois composants différents, vous devriez maintenant avoir une compréhension de base des interactions entre .ts, .html, et .css fichiers pour créer un composant pleinement fonctionnel.
Dans le prochain tutoriel de la série, vous apprendrez à utiliser tous ces composants ensemble et à apporter les dernières modifications nécessaires pour que l'application puisse s'exécuter sans erreur..
