Creați un App Finder Library în unghiular LibraryListComponent și LibraryDetailsComponent

În tutorialul anterior al seriei noastre, am finalizat crearea noastră HomeComponent și a început să lucreze la LibraryListComponent. In timp ce HomeComponent a permis utilizatorilor să introducă numele oricărei biblioteci și să o caute, LibraryListComponent a oferit o listă de biblioteci care corespundeau termenului de căutare dat.

Până acum, am scris doar logica noastră LibraryListComponent-trebuie să actualizăm șabloanele HTML și fișierele CSS pentru a face această componentă utilă. În acest tutorial, vom actualiza fișierele rămase ale noastre LibraryListComponent și de a crea, de asemenea LibraryDetailsComponent in intregimea sa.

Crearea LibraryListComponent Format

Dacă citiți tutorialul anterior, este posibil să vă amintiți că am stocat datele bibliotecilor individuale ca obiecte în elemente separate de matrice. Întrucât am de gând să arătăm toate aceste rezultate utilizatorilor noștri, trebuie să folosim * ngFor repetare directivă pentru a trece peste întreaga listă și a le face în interiorul LibraryListComponent.

Fiecare bibliotecă va avea propriile sale conținuturi div blocați cu numele bibliotecii redate înăuntru h4 Etichete. În partea de jos a fiecărei biblioteci există un link care duce utilizatorii la pagina de detalii a respectivei biblioteci. Toate aceste elemente sunt învelite în interiorul unui container div cu o lățime fixă ​​de 800 px.

 
 
 
Library.name
 
Versiune: Library.version
 
Descriere: Library.description
 Consultați mai multe detalii 
 
 
 

Iată CSS-ul pe care l-am folosit pentru a modela elementele din interior LibraryListComponent șablon. Am adăugat o margine superioară pe fiecare unitate de bibliotecă, astfel încât acestea să pară separate unul de celălalt. Puteți folosi o altă tehnică pentru a le separa:

div.container width: 800px; margine: 20 pixeli automat;  div.library-unit frontieră-sus: 1px solid #ccc; padding-top: 20px;  h4 font-family: "Lato"; dimensiune font: 1.75em; culoare: verde; marja: 0;  p font-family: "Lato"; font-size: 1.2m; culoarea neagra; font-weight: 300; margine: 10px 0;  p span.title culoare: albastru; lățime: 250px; afișare: inline-block; vertical-aliniere: partea de sus;  p span.detail lățime: 500px; afișare: inline-block; font-size: 0.9cm; linia-înălțime: 1,7;  a.see-mai mult text-decorare: nimic; fundal: portocaliu; culoare albă; padding: 5px 10px; afișare: inline-block; margin-bottom: 10px; raza de graniță: 10 pixeli; font-familie: 'Lato'; 

Crearea LibraryDetailsComponent

LibraryDetailsComponent este ultima componentă a aplicației noastre. Pentru a genera rapid toate fișierele necesare, treceți la directorul de proiect și executați următoarea comandă din consola.

ng generează detalii despre biblioteci componente

Acest lucru va crea un folder numit -bibliotecă detalii în directorul rădăcină al aplicației, cu patru fișiere în ea. Trebuie doar să ne ocupăm de cele trei fișiere numite bibliotecă-details.component.ts, bibliotecă-details.component.html, și bibliotecă-details.component.css.

Să începem editarea bibliotecă-details.component.ts fișierul primul. Acesta va conține toată logica componentei noastre. Ca și cum LibraryListComponent, începem prin importul unor dependențe diferite.

O dependență suplimentară pe care o vom importa este Locație. Aceasta ne permite să interacționăm cu adresa URL a browserului. Vom folosi-o pentru a permite cititorilor noștri să se întoarcă la pagina anterioară făcând clic pe butonul din spate din interiorul nostru LibraryDetailsComponent. Dacă au ajuns aici prin LibraryListComponent, ele vor fi luate înapoi în lista bibliotecilor. Dacă au sosit aici făcând clic pe oricare dintre bibliotecile populare de pe HomeComponent, ei vor fi luați înapoi la HomeComponent.

În interiorul LibraryDetailsComponent clasa de definire, declarăm o grămadă de proprietăți pentru a stoca informații cum ar fi cea mai recentă versiune, descriere, pagină de pornire, licență etc. Toate acestea au fost inițializate cu o valoare "Încărcare ...". Această valoare va fi actualizată de îndată ce vom primi datele despre o anumită bibliotecă.

Noi numim getLibrary () metoda noastră LibraryDetailsComponent la inițializare, astfel încât valorile relevante să poată fi populate cât mai repede posibil. Iată codul complet al nostru bibliotecă-details.component.ts fişier:

import Component, OnInit de la '@ angular / core'; import ActivatedRoute de la '@ unghiular / router'; import Location din '@ unghiular / common'; import LibraryService de la "... /library.service"; @Component (selector: 'app-library-details', templateUrl: './library-details.component.html', styleUrls: ['./library-details.component.css']) clasa de export LibraryDetailsComponent implementează OnInit name = 'Încărcare ...'; versiunea = 'Încărcare ...'; description = 'Încărcare ...'; homepage = 'Încărcare ...'; repository = 'Încărcare ...'; licență = 'Încărcare ...'; constructor (rută privată: ActivatedRoute, bibliotecă privatăService: LibraryService, locație privată: Locație)  ngOnInit () this.getLibrary ();  getLibrary (): void const bibliotecă: string = this.route.snapshot.paramMap.get ('bibliotecă'); this.libraryService.showLibrary (bibliotecă) .then ((res: orice) => this.name = res.name; this.version = res.version; this.description = res.description; this.homepage = res.homepage ; this.repository = res.repository.url; this.license = res.license;);  goBack (): void this.location.back ();  

Crearea LibraryDetailsComponent Șablon și Foaie de stil

Am stocat deja toate informațiile despre o bibliotecă în diferite variabile, astfel încât afișarea acestora către utilizatori va fi ușor acum. Am folosit și altele deschidere în șablon pentru a afișa informațiile utilizatorilor. Acest lucru mi-a permis să aliniez aceste valori cu ușurință. Iată codul pentru bibliotecă-details.component.html fişier:

 
 Numele Bibliotecii: Nume
 
 Ultima versiune: versiune
 
 Descriere: Descriere
 
 Pagina principala: pagina principala
 
 Repertoriu: repertoriu
 
 Licență: licență
 Întoarce-te 
 

La fel ca și alte componente, am înfășurat toate elementele din interiorul unui container div de data aceasta, de asemenea.

Vom stabili lățimea tuturor deschidere elemente cu titlu pentru a avea o lățime fixă ​​de 250 px. În acest fel, detaliile bibliotecii vor fi aliniate corespunzător. Aici este CSS care trebuie să intre în interiorul nostru bibliotecă-details.component.css fişier:

div.container width: 800px; margine: 20 pixeli automat;  p font-family: "Lato"; font-size: 1.4; culoarea neagra;  p span.title culoare: albastru; lățime: 250px; afișare: inline-block; vertical-aliniere: partea de sus;  p span.detail lățime: 500px; afișare: inline-block; font-size: 0.9cm; linia-înălțime: 1,7;  butonul margin-top: 20px; font-familie: 'Lato'; dimensiune font: 1em; fundal-culoare: # 3A6; frontieră: nici una; padding: 5px 10px; raza de graniță: 5px; cursor: pointer; contur: nici unul; culoare albă; font-familie: 'Lato';  

Gândurile finale

Am început acest tutorial prin actualizarea șablonului și a fișierului CSS al nostru LibraryListComponent. După aceea, ne-am mutat la LibraryDetailsComponent și am învățat cum să afișăm utilizatorilor noștri toate informațiile despre o anumită bibliotecă. După ce ați terminat toate cele patru tutoriale din această serie, ar trebui să aveți acum o aplicație de căutare a bibliotecii de lucru. 

Cea mai rapidă modalitate de a învăța Angular este să faci ceva singur. Ținând cont de acest lucru, ar trebui să încercați să faceți anumite modificări în această aplicație. De exemplu, puteți limita LibraryListComponent pentru a afișa doar primele 20 de rezultate sau pentru a sorta rezultatele pe baza numelui bibliotecii etc. Am făcut ceva similar în prima serie de aplicații Angular. Combinând cunoștințele ambelor serii ar trebui să vă ajute să faceți aceste schimbări cu ușurință.

Sper că această serie a îmbunătățit înțelegerea dvs. de Angular. Dacă există ceva pe care doriți să-l clarificați în acest tutorial, spuneți-mi în comentariile.