O componentă este unul dintre cele mai importante componente ale unei aplicații Angular. Componentele sunt fragmente de cod reutilizabile care alcătuiesc anumite secțiuni ale site-ului dvs. web.
Exemplele de componente pe care le puteți crea includ elemente mai mici ale UI, cum ar fi butoanele sau cardurile. Ele pot include, de asemenea, elemente mai mari ale UI, cum ar fi bare laterale, bare de navigare sau pagini întregi.
Utilizarea componentelor în Angular
Când creați componente într-o aplicație Angular, le puteți utiliza în cadrul altor componente. De exemplu, puteți crea o componentă pentru un element mare de card UI. Apoi puteți utiliza această componentă ca o etichetă HTML obișnuită, oriunde doriți:
<app-new-component></app-new-component>Deoarece componentele sunt biți de cod reutilizabili, puteți trece și variabile, astfel încât datele pentru fiecare instanță să fie diferite. De asemenea, puteți crea componente pentru pagini și puteți direcționa către ele în consecință folosind app-routing.module.ts fişier.
Puteți să vă proiectați componentele în funcție de structura aplicației și de cât de mult doriți să vă separați funcționalitatea.
Cum se creează o componentă
Puteți folosi nggenera comanda pentru a crea o nouă componentă.
- Creaza un nou Aplicație unghiulară folosind ng nou sau deschide unul existent.
- Deschideți promptul de comandă sau terminalul. Alternativ, dacă aveți aplicația Angular deschisă într-un IDE precum Visual Studio Code, puteți utiliza terminalul încorporat.
- În terminal, navigați la locația folderului rădăcină al proiectului. De exemplu:
CD C:\Utilizatori\Sharl\Desktop\Angular-Application - Rulați ng genera componentă comanda, urmată de numele noii componente:
generați componenta ui-card - Noua componentă va fi creată într-un folder nou, în interiorul src/app director.
Cum să adăugați conținut la componenta unghiulară
Angular creează fiecare componentă cu un fișier HTML, CSS, TypeScript și specificații de testare.
- The fișier HTML stochează conținutul HTML al componentei.
- The fișier CSS stochează stilul componentei.
- The Fișier cu specificații de testare (spec.ts). stochează orice test unitar pentru componentă.
- The Fișier TypeScript stochează logica și funcționalitatea care definește componenta.
Adăugați conținut la componenta personalizată ui-card.
- Deschis src/app/ui-card/ui-card.component.htmlși actualizați codul HTML al componentei. Asigurați-vă că aveți o imagine cu același nume într-un folder numit src/assets/images în aplicația dvs. Angular. Înlocuiți conținutul ui-card.component.html cu urmatoarele:
<div class="card">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div class="recipient">
<clasa h4="titlu"> Munții Albaștri </h4>
<p> NSW, Australia </p>
</div>
</div> - Deschis ui-card.component.cssși adăugați conținut CSS la componentă:
.card {
cutie-umbră: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
lăţime: 400px;
căptușeală: 8px;
marginea: 24px;
culoare de fundal: fum alb;
familie de fonturi: sans-serif;
}.cardimg {
lățimea maximă: 400px;
}.titlu {
padding-top: 16px;
}.container {
căptușeală: 2px 16px;
} - The ui-card.component.ts fișierul conține deja o clasă pentru noua componentă unde puteți adăuga noi funcții, logică și funcționalitate. Ar trebui să arate așa:
exportclasă UiCardComponent unelte OnInit {
constructor() { }
ngOnInit(): gol {
// Adăugați ceva logic de cod aici
}
// Sau adăugați logica și funcționalitatea dvs. în funcții noi
}
Cum să utilizați componenta în HTML-ul altei componente
Interior ui-card.component.ts, există trei atribute: selector, templateUrl și styleUrl. TemplateUrl se referă la HTML-ul componentei (și, prin urmare, face link-uri la fișierul HTML). Atributul styleUrls se referă la CSS-ul componentei și trimite la fișierul CSS.
@Component({
selector: „app-ui-card”,
templateUrl: „./ui-card.component.html”,
styleUrls: ['./ui-card.component.css']
})Când utilizați componenta UI Card într-o altă componentă, veți folosi numele selectorului „app-ui-card”.
- Mai întâi, adăugați conținut pe pagina dvs. web. Deschis src/app/app.component.html și adăugați o bară de navigare:
<div class="navbar-header">
<o clasă="nav-title"><b> Bara de navigare web </b></A>
</div> - Adăugați un pic de stil barei de navigare src/app/app.component.css:
.navbar-header {
culoare de fundal: #07393C;
căptușeală: 30px 50px;
afişa: contracta;
alinierea elementelor: centru;
familie de fonturi: sans-serif;
}.nav-titlu {
text-decor: nici unul;
culoare: alb;
marimea fontului: 16pct;
} - Sub bara de navigare înăuntru app.component.html, adăugați un nou card UI. Utilizați numele selectorului „app-ui-card” ca etichetă HTML:
<app-ui-card></app-ui-card> - De asemenea, puteți reutiliza componenta incluzând eticheta de mai multe ori. Pentru a face acest lucru, înlocuiți rândul de mai sus pentru a utiliza mai multe etichete HTML app-ui-card:
<stil div="display: flex">
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
</div> - Rulați aplicația dvs. Angular de pe terminal folosind ng servi comandă și deschideți site-ul dvs. într-un browser web.
Cum să treci parametrii de intrare în componentă
Deoarece componenta este reutilizabilă, există atribute pe care poate doriți să le schimbați de fiecare dată când o utilizați. În acest caz, puteți utiliza parametrii de intrare.
- Adăuga Intrare la lista de importuri din partea de sus a ui-card.component.ts:
import { Component, Input, OnInit } din '@unghiular/core'; - Apoi adăugați două variabile de intrare în interiorul UICardComponent clasă. Acestea vă vor permite să schimbați numele locației și imaginea care se afișează pe card. Populați ngOnInit funcționează așa cum se arată, pentru a construi calea către imagine sau pentru a utiliza o valoare implicită:
exportclasă UiCardComponent unelte OnInit {
@Intrare() numele locatiei: şir;
@Intrare() Nume imagine: şir;constructor() { }
ngOnInit(): gol {
dacă (acest.imageName) {
acest.imageName = "./assets/images/" + acest.imageName;
} altfel {
acest.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - În ui-card.component.html, modificați valoarea codificată a titlului 4 „Blue Mountains” pentru a utiliza în schimb variabila de intrare „locationName”. Schimbați și codul hard src atribut în eticheta de imagine pentru a utiliza variabila de intrare „imageName”:
<div class="card">
<img src="{{imageName}}" alt="Avatar">
<div class="recipient">
<clasa h4="titlu">{{numele locatiei? numele locatiei: 'Munții Albaștri'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - În app.component.html, modificați etichetele „app-ui-card” pentru a include intrările „locationName” și „imageName”. Pentru fiecare element al cardului UI, introduceți o valoare diferită. Asigurați-vă că fișierele de imagine există în folderul active/imagini al aplicației dvs. Angular.
<stil div="display: flex">
<app-ui-card [locationName]="'Munții Albaștri'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Rulați aplicația dvs. Angular de pe terminal folosind ng servi comandă și deschideți site-ul dvs. într-un browser web.
Este posibil să vedeți o eroare în acest moment despre aceste proprietăți care nu au inițializator. Dacă da, doar adăugați sau setați „strictPropertyInitialization”: fals în dumneavoastră tsconfig.json.
Cum să direcționați către o componentă nouă
Dacă componenta dvs. reprezintă o mare parte a site-ului dvs., cum ar fi o pagină nouă, atunci puteți, de asemenea, să vă direcționați către acea componentă.
- Deschis app-routing.module.ts. Importați componenta cardului UI din partea de sus a fișierului:
import { UiCardComponent } din './ui-card/ui-card.component'; - Adăugați o cale de rutare la matricea de rute:
const rute: Rute = [
//... Orice alte rute de care ai putea avea nevoie...
{ cale: „uicard”, componentă: UiCardComponent },
] - Înlocuiți tot conținutul curent în app.component.html pentru a include doar bara de navigare și o etichetă HTML de priză de router. Priza-router vă permite să rutați între pagini. Adăugați un hyperlink la bara de navigare, cu atributul href care se potrivește cu calea din matricea rute:
<div class="navbar-header">
<o clasă="nav-title"><b> Bara de navigare web </b></A>
<o clasă="nav-a-link" href="/uicard"><b> Card UI </b></A>
</div>
<router-priză></router-outlet> - Adăugați ceva stil noului link pentru cardul UI, în app.component.css:
.nav-a-link {
text-decor: nici unul;
culoare: #4b6569;
marimea fontului: 14pct;
margine-stânga: 60px;
grosimea fontului: mai usoara;
} - Rulați aplicația dvs. Angular de pe terminal folosind ng servi comandă și deschideți site-ul dvs. într-un browser web. Linkul va apărea în bara de navigare a paginii web.
- Rețineți adresa URL din browserul dvs. web. În mod implicit, este de obicei http://localhost: 4200/. Când faceți clic pe linkul cardului UI, pagina va fi direcționată către http://localhost: 4200/uicard, iar cardul UI va apărea.
Crearea componentelor în Angular
O componentă este unul dintre elementele de bază ale Angular. Componentele vă permit să împărțiți diferite secțiuni ale site-ului dvs. în părți mai mici, reutilizabile. Puteți transforma orice în componente, inclusiv butoane mai mici, carduri, bare laterale mai mari și bare de navigare.
De asemenea, puteți utiliza variabile de intrare pentru a transmite date prin diferite instanțe ale componentei. Și puteți ruta către componentă folosind căile URL.
Dacă dezvoltați o nouă aplicație Angular, poate fi necesar să construiți o bară de navigare pentru ca utilizatorii să navigheze prin componentele dvs. Având o bară de navigare receptivă, vă permite să o vizualizați pe diferite dispozitive, pe diferite dimensiuni de ecran.
