Ricerca nel sito web

Come creare e utilizzare i propri componenti in Angular

Aggiungi i tuoi elementi riutilizzabili per organizzare un sito e aumentare la tua efficienza.

Un componente è uno degli elementi costitutivi più importanti di un'applicazione Angular. I componenti sono frammenti di codice riutilizzabili che compongono 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 dei componenti in Angular

Quando crei componenti in un'applicazione Angular, puoi utilizzarli all'interno di altri componenti. Ad esempio, potresti 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-new-component></app-new-component>

Poiché i componenti sono frammenti 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 indirizzarli di conseguenza utilizzando il file app-routing.module.ts.

Puoi progettare i tuoi componenti in base alla struttura della tua applicazione e a quanto desideri separare le tue funzionalità.

Come creare un componente

Puoi utilizzare il comando ng generate per creare un nuovo componente.

  1. Crea una nuova applicazione Angular utilizzando ng new o aprine una esistente.
  2. Apri il prompt dei comandi o il terminale. In alternativa, se la tua applicazione Angular è aperta in un IDE come Visual Studio Code, puoi utilizzare il terminale integrato.

  3. Nel terminale, vai alla posizione della cartella principale del progetto. Per esempio:

    cd C:\Users\Sharl\Desktop\Angular-Application

  4. Esegui il comando ng generate componente, seguito dal nome del nuovo componente:

    ng generate component ui-card

  5. Il nuovo componente verrà creato in una nuova cartella, all'interno della directory src/app.

Come aggiungere contenuto al componente Angular

Angular crea ciascun componente con un file HTML, CSS, TypeScript e Testing Specifiche.

  • Il file HTML memorizza il contenuto HTML del componente.
  • Il file CSS memorizza lo stile del componente.
  • Il file Specifica 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 della scheda utente personalizzata.

  1. Apri src/app/ui-card/ui-card.component.html e 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:

    <div class="card">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div class="container">
        <h4 class="title"> Blue Mountains </h4>
        <p> NSW, Australia </p>
    </div>
</div>

  2. Apri ui-card.component.css e aggiungi contenuto CSS al componente:

    .card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 400px;
    padding: 8px;
    margin: 24px;
    background-color: whitesmoke;
    font-family: sans-serif;
}
 
.card img {
   max-width: 400px;
}
 
.title {
    padding-top: 16px;
}
 
.container {
    padding: 2px 16px;
}

  3. Il file ui-card.component.ts contiene già una classe per il nuovo componente in cui è possibile aggiungere nuove funzioni, logica e funzionalità. Dovrebbe sembrare come questo:

    export class UiCardComponent implements OnInit {
  constructor() { }
  ngOnInit(): void {
    // Add some code logic here
  }
  // Or, add your logic and functionality in new functions
}

Come utilizzare il componente nell'HTML di un altro componente

All'interno di ui-card.component.ts sono presenti tre attributi: selector, templateUrl e styleUrl. Il templateUrl fa riferimento 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.

@Component({
  selector: 'app-ui-card',
  templateUrl: './ui-card.component.html',
  styleUrls: ['./ui-card.component.css']
})

Quando utilizzi il componente Scheda UI in un altro componente, utilizzerai il nome del selettore "app-ui-card".

  1. Innanzitutto, aggiungi del contenuto alla tua pagina web. Apri src/app/app.component.html e aggiungi una barra di navigazione:

    <div class="navbar-header">
    <a class="nav-title"><b> Web Navbar </b></a>
</div>

  2. Aggiungi uno stile alla barra di navigazione in src/app/app.component.css:

    .navbar-header {
    background-color: #07393C;
    padding: 30px 50px;
    display: flex;
    align-items: center;
    font-family: sans-serif;
}
 
.nav-title {
    text-decoration: none;
    color: white;
    font-size: 16pt;
}

  3. 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>

  4. 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:

    <div style="display: flex">
  <app-ui-card> </app-ui-card>
  <app-ui-card> </app-ui-card>
  <app-ui-card> </app-ui-card>
</div>

  5. Esegui la tua applicazione Angular dal terminale utilizzando il comando ng serve e apri il tuo sito web in un browser web.

Come passare i parametri di input nel componente

Poiché il componente è riutilizzabile, esistono attributi che potresti voler modificare ogni volta che lo utilizzi. In questo caso è possibile utilizzare i parametri di input.

  1. Aggiungi Input all'elenco delle importazioni nella parte superiore di ui-card.component.ts:

    import { Component, Input, OnInit } from '@angular/core';

  2. Quindi aggiungi due variabili di input all'interno della classe UICardComponent. Questi ti permetteranno di cambiare il nome della posizione e l'immagine visualizzata sulla carta. Compila la funzione ngOnInit come mostrato, per creare il percorso dell'immagine o utilizzare un valore predefinito:

    export class UiCardComponent implements OnInit {
  @Input() locationName: string;
  @Input() imageName: string;
 
  constructor() { }
  ngOnInit(): void {
    if (this.imageName) {
      this.imageName = "./assets/images/" + this.imageName;
    } else {
      this.imageName = "./assets/images/blue-mountains.jpg";
    }
  }
}

  3. In ui-card.component.html, modifica il valore hardcoded dell'Intestazione 4 "Blue Mountains" per utilizzare invece la variabile di input "locationName". Modifica anche l'attributo hardcoded src nel tag immagine per utilizzare la variabile di input "imageName":

    <div class="card">
    <img src="{{imageName}}" alt="Avatar">
    <div class="container">
        <h4 class="title">{{locationName ? locationName : 'Blue Mountains'}}</h4>
        <p>NSW, Australia</p>
    </div>
</div>

  4. 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 immagine esistano nella cartella asset/immagini della tua applicazione Angular.

    <div style="display: flex">
  <app-ui-card [locationName]="'Blue Mountains'" [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>

  5. Esegui la tua applicazione Angular dal terminale utilizzando il comando ng serve 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 semplicemente "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 indirizzarlo a quel componente.

  1. Apri app-routing.module.ts. Importa il componente della scheda UI nella parte superiore del file:

    import { UiCardComponent } from './ui-card/ui-card.component';

  2. Aggiungi un percorso di routing all'array di rotte:

    const routes: Routes = [
    // ... Any other routes you may need ...
    { path: 'uicard', component: UiCardComponent },
]

  3. Sostituisci tutto il contenuto corrente in app.component.html per includere solo la barra di navigazione e un tag HTML router-outlet. La presa del router consente di passare da una pagina all'altra. Aggiungi un collegamento ipertestuale alla barra di navigazione, con l'attributo href che corrisponde al percorso nell'array delle rotte:

    <div class="navbar-header">
    <a class="nav-title"><b> Web Navbar </b></a>
    <a class="nav-a-link" href="/uicard"><b> UI Card </b></a>
</div>
<router-outlet></router-outlet>

  4. Aggiungi uno stile al nuovo collegamento alla scheda dell'interfaccia utente, in app.component.css:

    .nav-a-link {
    text-decoration: none;
    color: #4b6569;
    font-size: 14pt;
    margin-left: 60px;
    font-weight: lighter;
}

  5. Esegui la tua applicazione Angular dal terminale utilizzando il comando ng serve e apri il tuo sito web in un browser web. Il collegamento verrà visualizzato nella barra di navigazione della pagina web.

  6. Prendi nota dell'indirizzo URL nel tuo browser web. Per impostazione predefinita, solitamente è http://localhost:4200/. Quando fai clic sul collegamento della scheda UI, la pagina verrà indirizzata a http://localhost:4200/uicard e verrà visualizzata la scheda UI.

Creazione di componenti in Angular

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 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 visualizzarlo su diversi dispositivi, su schermi di diverse dimensioni.

Articoli correlati: