Share
Nel precedente tutorial della nostra serie, abbiamo completato la creazione del nostro HomeComponent e ha iniziato a lavorare su LibraryListComponent. Mentre il HomeComponent permesso agli utenti di inserire il nome di qualsiasi libreria e cercarlo, il LibraryListComponent fornito un elenco di librerie che corrispondono al termine di ricerca specificato.
Finora, abbiamo solo scritto la logica del nostro LibraryListComponent-dobbiamo ancora aggiornare il modello HTML e i file CSS per rendere questo componente utile. In questo tutorial, aggiorneremo i file rimanenti del nostro LibraryListComponent e anche creare il LibraryDetailsComponent nella sua interezza.
Accentsconagua
LibraryListComponent ModelloSe leggi il tutorial precedente, potresti ricordare che abbiamo archiviato i dati di singole librerie come oggetti in elementi di array separati. Dal momento che intendiamo mostrare tutti questi risultati ai nostri utenti, dobbiamo utilizzare il * ngFor direttiva ripetitore per andare su tutta la lista e renderli all'interno del LibraryListComponent.
Ogni libreria avrà il suo contenuto div bloccare con il nome della libreria resa all'interno h4 tag. Nella parte inferiore di ogni libreria, c'è un collegamento che porta gli utenti alla pagina dei dettagli di quella libreria. Tutti questi elementi sono avvolti in un contenitore div con una larghezza fissa di 800 px.
Library.name
Versione: Library.version
Descrizione: Library.description
Vedi più dettagli
Ecco il CSS che ho usato per modellare gli elementi all'interno del LibraryListComponent modello. Ho aggiunto un bordo superiore su ogni unità della libreria in modo che siano separati l'uno dall'altro. Puoi usare un'altra tecnica per separarli:
div.container width: 800px; margine: 20px auto; div.library-unit border-top: 1px solid #ccc; padding-top: 20px; h4 font-family: 'Lato'; font-size: 1.75em; colore: verde; margine: 0; p font-family: 'Lato'; font-size: 1.2em; colore nero; font-weight: 300; margine: 10px 0; p span.title color: blue; larghezza: 250 px; display: blocco in linea; vertical-align: top; p span.detail width: 500px; display: blocco in linea; font-size: 0.9em; altezza della linea: 1.7; a.see-more text-decoration: none; sfondo: arancione; colore bianco; imbottitura: 5px 10px; display: blocco in linea; margin-bottom: 10px; border-radius: 10px; font-family: 'Lato';
LibraryDetailsComponent Il LibraryDetailsComponent è l'ultimo componente della nostra app. Per generare rapidamente tutti i file necessari, passare alla directory del progetto ed eseguire il seguente comando dalla console.
ng genera i dettagli della libreria dei componenti
Questo creerà una cartella chiamata biblioteca-details nella directory principale della tua app con quattro file al suo interno. Dobbiamo solo preoccuparci dei tre file nominati biblioteca-details.component.ts, biblioteca-details.component.html, e biblioteca-details.component.css.
Iniziamo a modificare il biblioteca-details.component.ts prima il file. Conterrà tutta la logica del nostro componente. Proprio come LibraryListComponent, Iniziamo importando diverse dipendenze.
Una dipendenza aggiuntiva che verrà importata è Posizione. Ci consente di interagire con l'URL del browser. Lo useremo per consentire ai nostri lettori di tornare alla pagina precedente facendo clic sul pulsante Indietro all'interno del nostro LibraryDetailsComponent. Se sono arrivati qui attraverso il LibraryListComponent, saranno riportati all'elenco delle biblioteche. Se sono arrivati qui facendo clic su una qualsiasi delle librerie popolari su HomeComponent, saranno riportati indietro HomeComponent.
Dentro il LibraryDetailsComponent definizione della classe, dichiariamo un gruppo di proprietà per memorizzare informazioni come l'ultima versione, descrizione, homepage, licenza, ecc. Tutte queste sono state inizializzate con un valore di "Caricamento in corso ...". Questo valore verrà aggiornato non appena recupereremo i dati su una particolare libreria.
Chiamiamo il getLibrary () metodo del nostro LibraryDetailsComponent al momento dell'inizializzazione in modo che i valori pertinenti possano essere popolati il più rapidamente possibile. Ecco il codice completo del nostro biblioteca-details.component.ts file:
import Component, OnInit da '@ angular / core'; import ActivatedRoute da '@ angular / router'; import Location da '@ angular / common'; import LibraryService da '... /library.service'; @Component (selector: 'app-library-details', templateUrl: './library-details.component.html', styleUrls: ['./library-details.component.css']) classe di esportazione LibraryDetailsComponent implementa OnInit name = 'Caricamento in corso ...'; version = 'Caricamento in corso ...'; description = 'Caricamento in corso ...'; homepage = 'Caricamento in corso ...'; repository = 'Caricamento in corso ...'; license = 'Caricamento in corso ...'; costruttore (percorso privato: ActivatedRoute, libreria privataService: LibraryService, posizione privata: posizione) ngOnInit () this.getLibrary (); getLibrary (): void const library: string = this.route.snapshot.paramMap.get ('library'); this.libraryService.showLibrary (library) .then ((res: any) => 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 (); LibraryDetailsComponent Modello e foglio di stileAbbiamo già memorizzato tutte le informazioni su una libreria in diverse variabili, quindi visualizzarla agli utenti sarà facile ora. Ho usato aggiuntivo campata i tag nel modello per mostrare le informazioni agli utenti. Questo mi ha permesso di allineare correttamente questi valori con facilità. Ecco il codice per il biblioteca-details.component.html file:
Nome della biblioteca: nome
Ultima versione: versione
Descrizione: descrizione
Home page: Homepage
repository: Repository
Licenza: licenza
Proprio come altri componenti, ho avvolto tutti gli elementi all'interno di un contenitore div anche questa volta.
Imposteremo la larghezza di tutti campata elementi con il titolo classe per avere una larghezza fissa di 250 px. In questo modo, i dettagli della libreria saranno allineati correttamente. Ecco il CSS che deve entrare nel nostro biblioteca-details.component.css file:
div.container width: 800px; margine: 20px auto; p font-family: 'Lato'; font-size: 1.4em; colore nero; p span.title color: blue; larghezza: 250 px; display: blocco in linea; vertical-align: top; p span.detail width: 500px; display: blocco in linea; font-size: 0.9em; altezza della linea: 1.7; pulsante margin-top: 20px; font-family: 'Lato'; dimensione carattere: 1em; background-color: # 3A6; confine: nessuno; imbottitura: 5px 10px; border-radius: 5px; cursore: puntatore; contorni: nessuno; colore bianco; font-family: 'Lato';
Abbiamo iniziato questo tutorial aggiornando il modello e il file CSS del nostro LibraryListComponent. Successivamente, siamo passati al LibraryDetailsComponent e ho imparato come visualizzare tutte le informazioni su una particolare libreria per i nostri utenti. Dopo aver completato tutti e quattro i tutorial di questa serie, ora dovresti avere un'app di ricerca delle librerie funzionante.
Il modo più veloce per imparare l'angolare è fare tutto da solo. Tenendo presente questo, dovresti provare a fare alcune modifiche a questa app. Ad esempio, potresti limitare LibraryListComponent per mostrare solo i primi 20 risultati o ordinarli in base al nome della libreria, ecc. Abbiamo fatto qualcosa di simile nella nostra prima serie di app Angular. Combinare la conoscenza di entrambe queste serie dovrebbe aiutarti a fare queste modifiche con facilità.
Spero che questa serie abbia migliorato la tua comprensione di Angular. Se c'è qualcosa che vorresti che chiarissi in questo tutorial, fammi sapere nei commenti.
