Un composant est l'un des éléments de base les plus importants d'une application angulaire. Les composants sont des morceaux de code réutilisables qui composent certaines sections de votre site Web.
Les exemples de composants que vous pouvez créer incluent des éléments d'interface utilisateur plus petits tels que des boutons ou des cartes. Ils peuvent également inclure des éléments d'interface utilisateur plus grands tels que des barres latérales, des barres de navigation ou des pages entières.
Utilisation de composants dans Angular
Lorsque vous créez des composants dans une application Angular, vous pouvez les utiliser dans d'autres composants. Par exemple, vous pouvez créer un composant pour un grand élément de carte d'interface utilisateur. Vous pouvez ensuite utiliser ce composant comme une balise HTML standard, où vous le souhaitez :
<app-nouveau-composant></app-new-component>Étant donné que les composants sont des morceaux de code réutilisables, vous pouvez également transmettre des variables afin que les données de chaque instance soient différentes. Vous pouvez également créer des composants pour les pages, et vous pouvez les router en conséquence à l'aide de la
app-routing.module.ts dossier.Vous pouvez concevoir vos composants en fonction de la structure de votre application et du degré de séparation de vos fonctionnalités.
Comment créer un composant
Vous pouvez utiliser le nggénérer la commande pour créer un nouveau composant.
- Créer un nouveau Application angulaire utilisant nouveau ou en ouvrir un existant.
- Ouvrez l'invite de commande ou le terminal. Alternativement, si votre application Angular est ouverte dans un IDE tel que Visual Studio Code, vous pouvez utiliser le terminal intégré.
- Dans le terminal, accédez à l'emplacement du dossier racine du projet. Par exemple:
CD C:\Users\Sharl\Desktop\Angular-Application - Exécutez le ng générer un composant commande, suivi du nom du nouveau composant :
ng générer composant ui-card - Le nouveau composant sera créé dans un nouveau dossier, à l'intérieur du source/application annuaire.
Comment ajouter du contenu au composant angulaire
Angular crée chaque composant avec un fichier HTML, CSS, TypeScript et Testing Specification.
- La Fichier HTML stocke le contenu HTML du composant.
- La Fichier CSS stocke le style du composant.
- La Fichier de spécification de test (spec.ts) stocke tous les tests unitaires pour le composant.
- La Fichier TypeScript stocke la logique et la fonctionnalité qui définissent le composant.
Ajoutez du contenu au composant ui-card personnalisé.
- Ouvert src/app/ui-card/ui-card.component.html, et mettez à jour le code HTML du composant. Assurez-vous d'avoir une image portant le même nom dans un dossier nommé src/actifs/images dans votre application angulaire. Remplacer le contenu de ui-card.component.html avec ce qui suit :
<classe div="carte">
<img source="./assets/images/blue-mountains.jpg" alt="Avatar">
<classe div="récipient">
<classe h4="Titre"> Montagnes bleues </h4>
<p> Nouvelle-Galles du Sud, Australie </p>
</div>
</div> - Ouvert ui-card.component.css, et ajoutez du contenu CSS au composant :
.carte {
boîte ombre: 0 4pixels 8pixels 0 RVB(0, 0, 0, 0.2);
largeur: 400pixels;
rembourrage: 8pixels;
marge: 24pixels;
Couleur de l'arrière plan: fumée blanche;
famille de polices: sans empattement;
}.carteimage {
largeur maximale: 400pixels;
}.Titre {
rembourrage: 16pixels;
}.récipient {
rembourrage: 2pixels 16pixels;
} - La ui-card.component.ts Le fichier contient déjà une classe pour le nouveau composant où vous pouvez ajouter de nouvelles fonctions, logiques et fonctionnalités. Ça devrait ressembler à ça:
exporterclasser Composant UiCard met en oeuvre OnInit {
constructeur() { }
ngOnInit(): annuler {
// Ajouter une logique de code ici
}
// Ou, ajoutez votre logique et fonctionnalité dans de nouvelles fonctions
}
Comment utiliser le composant dans le code HTML d'un autre composant
À l'intérieur ui-card.component.ts, il existe trois attributs: selector, templateUrl et styleUrl. Le templateUrl fait référence au HTML du composant (et donc des liens vers le fichier HTML). L'attribut styleUrls fait référence au CSS du composant et renvoie au fichier CSS.
@Composant({
sélecteur: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Lorsque vous utilisez le composant UI Card dans un autre composant, vous utiliserez le nom de sélecteur "app-ui-card".
- Tout d'abord, ajoutez du contenu à votre page Web. Ouvert src/app/app.component.html et ajoutez une barre de navigation :
<classe div="en-tête de barre de navigation">
<une classe="titre de navigation"><b> Barre de navigation Web </b></un>
</div> - Ajoutez du style à votre barre de navigation dans src/app/app.component.css:
.navbar-en-tête {
Couleur de l'arrière plan: #07393C;
rembourrage: 30pixels 50pixels;
affichage: fléchir;
aligner les éléments: centre;
famille de polices: sans empattement;
}.nav-titre {
texte-décoration: rien;
Couleur: blanche;
taille de police: 16pt;
} - Sous la barre de navigation dans app.component.html, ajoutez une nouvelle carte d'interface utilisateur. Utilisez le nom du sélecteur "app-ui-card" comme balise HTML :
<app-ui-carte></app-ui-card> - Vous pouvez également réutiliser le composant en incluant la balise plusieurs fois. Pour ce faire, remplacez la ligne ci-dessus pour utiliser plusieurs balises HTML app-ui-card à la place :
<style div ="affichage: flexible">
<app-ui-carte></app-ui-card>
<app-ui-carte></app-ui-card>
<app-ui-carte></app-ui-card>
</div> - Exécutez votre application Angular depuis le terminal en utilisant le ng servir commande et ouvrez votre site Web dans un navigateur Web.
Comment passer des paramètres d'entrée dans le composant
Étant donné que le composant est réutilisable, il est possible que vous souhaitiez modifier certains attributs à chaque fois que vous l'utilisez. Dans ce cas, vous pouvez utiliser des paramètres d'entrée.
- Ajouter Saisir à la liste des importations en haut de ui-card.component.ts:
importer { Composant, Entrée, OnInit } de '@angulaire/core'; - Ajoutez ensuite deux variables d'entrée à l'intérieur du Composant UICard classer. Ceux-ci vous permettront de modifier le nom de l'emplacement et l'image qui s'affiche sur la carte. Remplissez le ngOnInit fonction comme indiqué, pour construire le chemin vers l'image ou utiliser une valeur par défaut :
exporterclasser Composant UiCard met en oeuvre OnInit {
@Saisir() nom de la localisation: chaîne de caractères;
@Saisir() nom de l'image: chaîne de caractères;constructeur() { }
ngOnInit(): annuler {
si (cette.imageName) {
cette.imageName = "./actifs/images/" + cette.imageName ;
} autre {
cette.imageName = "./assets/images/blue-mountains.jpg" ;
}
}
} - Dans ui-card.component.html, modifiez la valeur codée en dur de Heading 4 "Blue Mountains" pour utiliser la variable d'entrée "locationName" à la place. Changez également le code dur src dans la balise image pour utiliser la variable d'entrée "imageName" :
<classe div="carte">
<img source="{{nom de l'image}}" alt="Avatar">
<classe div="récipient">
<classe h4="Titre">{{nom de la localisation? nom de la localisation: 'Montagnes bleues'}}</h4>
<p>Nouvelle-Galles du Sud, Australie</p>
</div>
</div> - Dans app.component.html, modifiez les balises "app-ui-card" pour inclure les entrées "locationName" et "imageName". Pour chaque élément de carte d'interface utilisateur, entrez une valeur différente. Assurez-vous que les fichiers image existent dans le dossier assets/images de votre application Angular.
<style div ="affichage: flexible">
<app-ui-card [locationName]="'Montagnes bleues'" [nom de l'image]="'montagnes-bleues.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sidney'" [nom de l'image]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [nom de l'image]="'newcastle.jpg'"></app-ui-card>
</div> - Exécutez votre application Angular depuis le terminal en utilisant le ng servir commande et ouvrez votre site Web dans un navigateur Web.
Vous pouvez voir une erreur à ce stade concernant ces propriétés n'ayant pas d'initialiseur. Si c'est le cas, il suffit d'ajouter ou de définir "strictPropertyInitialization": faux dans ton tsconfig.json.
Comment router vers un nouveau composant
Si votre composant représente une grande partie de votre site Web, comme une nouvelle page, vous pouvez également vous diriger vers ce composant.
- Ouvert app-routing.module.ts. Importez le composant de carte d'interface utilisateur en haut du fichier :
importer { UiCardComponent } de './ui-card/ui-card.composant' ; - Ajoutez un chemin de routage au tableau de routes :
constante itinéraires: Itinéraires = [
//... Tout autre itinéraire dont vous pourriez avoir besoin...
{ chemin: 'uicard', composant: UiCardComponent },
] - Remplacer tout le contenu actuel dans app.component.html pour n'inclure que la barre de navigation et une balise HTML de sortie de routeur. La sortie du routeur vous permet de router entre les pages. Ajoutez un lien hypertexte à la barre de navigation, avec l'attribut href correspondant au chemin dans le tableau routes :
<classe div="en-tête de barre de navigation">
<une classe="titre de navigation"><b> Barre de navigation Web </b></un>
<une classe="lien de navigation" href="/uicard"><b> Carte d'interface utilisateur </b></un>
</div>
<routeur-prise></router-outlet> - Ajoutez du style au nouveau lien de carte d'interface utilisateur, dans app.component.css:
.nav-un-lien {
texte-décoration: rien;
Couleur: #4b6569;
taille de police: 14pt;
marge-gauche: 60pixels;
poids de la police: plus léger;
} - Exécutez votre application Angular depuis le terminal en utilisant le ng servir commande et ouvrez votre site Web dans un navigateur Web. Le lien apparaîtra dans la barre de navigation sur la page Web.
- Notez l'adresse URL dans votre navigateur Web. Par défaut, c'est généralement http://localhost: 4200/. Lorsque vous cliquez sur le lien de la carte d'interface utilisateur, la page sera acheminée vers http://localhost: 4200/uicard, et la carte d'interface utilisateur apparaîtra.
Création de composants en angulaire
Un composant est l'un des principaux éléments constitutifs d'Angular. Les composants vous permettent de diviser différentes sections de votre site Web en parties plus petites et réutilisables. Vous pouvez transformer n'importe quoi en composants, y compris des boutons plus petits, des cartes, des barres latérales plus grandes et des barres de navigation.
Vous pouvez également utiliser des variables d'entrée pour transmettre des données entre différentes instances du composant. Et vous pouvez acheminer vers le composant à l'aide de chemins d'URL.
Si vous développez une nouvelle application Angular, vous devrez peut-être créer une barre de navigation pour que vos utilisateurs puissent naviguer dans vos composants. Avoir une barre de navigation réactive vous permet de l'afficher sur différents appareils, sur différentes tailles d'écran.
