Un componente è uno degli elementi costitutivi più importanti di un'applicazione Angular. I componenti sono frammenti di codice riutilizzabili che costituiscono determinate sezioni del tuo sito web.
Esempi di componenti che puoi creare includono elementi dell'interfaccia utente più piccoli come pulsanti o schede. Possono anche includere elementi dell'interfaccia utente più grandi come barre laterali, barre di navigazione o intere pagine.
Utilizzo di componenti in angolare
Quando crei componenti in un'applicazione Angular, puoi usarli all'interno di altri componenti. Ad esempio, puoi creare un componente per un elemento di una scheda dell'interfaccia utente di grandi dimensioni. Puoi quindi utilizzare questo componente come un normale tag HTML, ovunque tu voglia:
<app-nuovo-componente></app-new-component>Poiché i componenti sono bit di codice riutilizzabili, puoi anche passare variabili in modo che i dati per ciascuna istanza siano diversi. Puoi anche creare componenti per le pagine e puoi instradarli di conseguenza usando il app-routing.module.ts file.
Puoi progettare i tuoi componenti in base alla struttura della tua applicazione e a quanto vuoi separare le tue funzionalità.
Come creare un componente
Puoi usare il nggenera comando per creare un nuovo componente.
- Creane uno nuovo Applicazione angolare usando ng nuovo o aprirne uno esistente.
- Apri il prompt dei comandi o il terminale. In alternativa, se la tua applicazione Angular è aperta in un file IDE come Visual Studio Code, puoi usare il terminale integrato.
- Nel terminale, vai alla posizione della cartella principale del progetto. Per esempio:
CD C:\Utenti\Sharl\Desktop\Angular-Application - Corri il ng generare componente comando, seguito dal nome del nuovo componente:
ng generare componente ui-card - Il nuovo componente verrà creato in una nuova cartella, all'interno del file sorgente/app directory.
Come aggiungere contenuto al componente angolare
Angular crea ogni componente con un file HTML, CSS, TypeScript e Testing Specification.
- Il File HTML memorizza il contenuto HTML del componente.
- Il File CSS memorizza lo stile del componente.
- Il File delle specifiche di test (spec.ts). memorizza tutti gli unit test per il componente.
- Il File TypeScript memorizza la logica e la funzionalità che definisce il componente.
Aggiungi del contenuto al componente personalizzato della scheda ui.
- Aprire src/app/ui-card/ui-card.component.htmle aggiorna l'HTML del componente. Assicurati di avere un'immagine con lo stesso nome in una cartella denominata src/assets/images nella tua applicazione Angular. Sostituisci il contenuto di ui-card.component.html con quanto segue:
<classe div="carta">
<sorgente img="./assets/images/blue-mountains.jpg" alt="Avatar">
<classe div="contenitore">
<classe h4="titolo"> Montagne Blu </h4>
<p> NSW, Australia </p>
</div>
</div> - Aprire ui-card.component.csse aggiungi contenuto CSS al componente:
.carta {
scatola-ombra: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
larghezza: 400px;
imbottitura: 8px;
margine: 24px;
colore di sfondo: fumo bianco;
famiglia di font: sans-serif;
}.cartaimg {
larghezza massima: 400px;
}.titolo {
imbottitura: 16px;
}.contenitore {
imbottitura: 2px 16px;
} - Il ui-card.component.ts file contiene già una classe per il nuovo componente in cui è possibile aggiungere nuove funzioni, logica e funzionalità. Dovrebbe sembrare come questo:
esportareclasse Componente UiCard implementa OnInit {
costruttore() { }
ngOnInit(): vuoto {
// Aggiungi un po' di logica di codice qui
}
// Oppure aggiungi la tua logica e funzionalità in nuove funzioni
}
Come utilizzare il componente nell'HTML di un altro componente
Dentro ui-card.component.ts, sono disponibili tre attributi: selector, templateUrl e styleUrl. Il templateUrl si riferisce all'HTML del componente (e quindi si collega al file HTML). L'attributo styleUrls si riferisce al CSS del componente e si collega al file CSS.
@Componente({
selettore: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Quando utilizzi il componente UI Card in un altro componente, utilizzerai il nome del selettore "app-ui-card".
- Innanzitutto, aggiungi alcuni contenuti alla tua pagina web. Aprire src/app/app.component.html e aggiungi una barra di navigazione:
<classe div="intestazione della barra di navigazione">
<una classe="nav-titolo"><b> barra di navigazione web </b></un>
</div> - Aggiungi un po' di stile alla tua barra di navigazione src/app/app.component.css:
.navbar-intestazione {
colore di sfondo: #07393C;
imbottitura: 30px 50px;
Schermo: flettere;
allineare-oggetti: centro;
famiglia di font: sans-serif;
}.nav-titolo {
decorazione del testo: nessuno;
colore: bianca;
dimensione del font: 16pt;
} - Sotto la barra di navigazione in app.component.html, aggiungi una nuova scheda dell'interfaccia utente. Utilizza il nome del selettore "app-ui-card" come tag HTML:
<app-ui-card></app-ui-card> - Puoi anche riutilizzare il componente includendo il tag più volte. Per fare ciò, sostituisci la riga precedente per utilizzare invece più tag HTML app-ui-card:
<stile div="display: flessibile">
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
<app-ui-card></app-ui-card>
</div> - Esegui la tua applicazione Angular dal terminale usando il ng servire comando e apri il tuo sito web in un browser web.
Come trasferire i parametri di input nel componente
Poiché il componente è riutilizzabile, ci sono attributi che potresti voler cambiare ogni volta che lo usi. In questo caso, è possibile utilizzare i parametri di input.
- Aggiungere Ingresso all'elenco delle importazioni in cima a ui-card.component.ts:
importare { Componente, Input, OnInit } da '@angolare/core'; - Quindi aggiungi due variabili di input all'interno di UICardComponent classe. Questi ti permetteranno di cambiare il nome della posizione e l'immagine che viene visualizzata sulla scheda. Popolare il ngOnInit funzione come mostrato, per creare il percorso dell'immagine o utilizzare un valore predefinito:
esportareclasse Componente UiCard implementa OnInit {
@Ingresso() nome del luogo: corda;
@Ingresso() nomeimmagine: corda;costruttore() { }
ngOnInit(): vuoto {
Se (questo.nomeimmagine) {
questo.imageName = "./assets/images/" + questo.nomeimmagine;
} altro {
questo.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - In ui-card.component.html, modificare il valore hardcoded dell'intestazione 4 "Blue Mountains" per utilizzare invece la variabile di input "locationName". Cambia anche l'hard coded src attributo nel tag immagine per utilizzare la variabile di input "imageName":
<classe div="carta">
<sorgente img="{{nomeimmagine}}" alt="Avatar">
<classe div="contenitore">
<classe h4="titolo">{{nome del luogo? nome del luogo: 'Montagne Blu'}}</h4>
<p>NSW, Australia</p>
</div>
</div> - In app.component.html, modifica i tag "app-ui-card" per includere gli input "locationName" e "imageName". Per ogni elemento della scheda dell'interfaccia utente, inserisci un valore diverso. Assicurati che i file di immagine esistano all'interno della cartella asset/images della tua applicazione Angular.
<stile div="display: flessibile">
<app-ui-card [locationName]="'Montagne Blu'" [nomeimmagine]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sidney'" [nomeimmagine]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [nomeimmagine]="'newcastle.jpg'"></app-ui-card>
</div> - Esegui la tua applicazione Angular dal terminale usando il ng servire comando e apri il tuo sito web in un browser web.
A questo punto potresti visualizzare un errore relativo a queste proprietà che non hanno un inizializzatore. In tal caso, aggiungi o imposta "strictPropertyInitialization": false nel tuo tsconfig.json.
Come instradare verso un nuovo componente
Se il tuo componente rappresenta gran parte del tuo sito Web, ad esempio una nuova pagina, puoi anche indirizzare a quel componente.
- Aprire app-routing.module.ts. Importa il componente della scheda dell'interfaccia utente nella parte superiore del file:
importare { Componente UiCard } da './ui-card/ui-card.component'; - Aggiungi un percorso di instradamento all'array di percorsi:
cost percorsi: Itinerari = [
//... Eventuali altri percorsi di cui potresti aver bisogno ...
{percorso: 'uicard', componente: UiCardComponent },
] - Sostituisci tutto il contenuto corrente in app.component.html per includere solo la barra di navigazione e un tag HTML della presa del router. La presa del router consente di instradare tra le pagine. Aggiungi un collegamento ipertestuale alla barra di navigazione, con l'attributo href che corrisponde al percorso nell'array di percorsi:
<classe div="intestazione della barra di navigazione">
<una classe="nav-titolo"><b> barra di navigazione web </b></un>
<una classe="nav-a-link" href="/uicard"><b> Scheda dell'interfaccia utente </b></un>
</div>
<presa del router></router-outlet> - Aggiungi uno stile al nuovo collegamento della scheda dell'interfaccia utente, in app.component.css:
.nav-un-link {
decorazione del testo: nessuno;
colore: #4b6569;
dimensione del font: 14pt;
margine sinistro: 60px;
peso del carattere: accendino;
} - Esegui la tua applicazione Angular dal terminale usando il ng servire comando e apri il tuo sito web in un browser web. Il collegamento apparirà nella barra di navigazione della pagina web.
- Prendi nota dell'indirizzo URL nel tuo browser web. Per impostazione predefinita, di solito lo è http://localhost: 4200/. Quando fai clic sul collegamento della scheda dell'interfaccia utente, la pagina verrà indirizzata a http://localhost: 4200/uicarde apparirà la scheda dell'interfaccia utente.
Creazione di componenti in angolare
Un componente è uno dei principali elementi costitutivi di Angular. I componenti ti consentono di suddividere diverse sezioni del tuo sito Web in parti più piccole e riutilizzabili. Puoi trasformare qualsiasi cosa in componenti, inclusi pulsanti più piccoli, schede, barre laterali più grandi e barre di navigazione.
Puoi anche utilizzare le variabili di input per passare i dati tra diverse istanze del componente. E puoi instradare al componente utilizzando i percorsi URL.
Se stai sviluppando una nuova app Angular, potresti dover creare una barra di navigazione per consentire ai tuoi utenti di navigare tra i tuoi componenti. Avere una barra di navigazione reattiva ti consente di visualizzarla su dispositivi diversi, su schermi di dimensioni diverse.