En komponent er en av de viktigste byggesteinene i en Angular-applikasjon. Komponenter er gjenbrukbare kodebiter som utgjør visse deler av nettstedet ditt.

Eksempler på komponenter du kan lage inkluderer mindre brukergrensesnittelementer som knapper eller kort. De kan også inkludere større brukergrensesnittelementer som sidefelt, navigasjonsfelt eller hele sider.

Bruke komponenter i Angular

Når du oppretter komponenter i en Angular-applikasjon, kan du bruke dem i andre komponenter. Du kan for eksempel lage en komponent for et stort UI-kortelement. Du kan deretter bruke denne komponenten som en vanlig HTML-tag, hvor som helst du vil:

<app-ny-komponent></app-new-component>

Siden komponenter er gjenbrukbare kodebiter, kan du også sende variabler slik at dataene for hver forekomst er forskjellige. Du kan også lage komponenter for sider, og du kan rute til dem deretter ved å bruke app-routing.module.ts fil.

Du kan designe komponentene dine basert på strukturen til applikasjonen din, og hvor mye du ønsker å skille funksjonaliteten din.

Hvordan lage en komponent

Du kan bruke nggenerere kommando for å lage en ny komponent.

  1. Lage en ny Kantet applikasjon ved hjelp av ng nytt eller åpne en eksisterende.
  2. Åpne ledeteksten eller terminalen. Alternativt, hvis du har din Angular-applikasjon åpen i en IDE som Visual Studio Code, kan du bruke den innebygde terminalen.
  3. I terminalen, naviger til plasseringen av rotmappen til prosjektet. For eksempel:
    cd C:\Users\Sharl\Desktop\Angular-Application
  4. Kjør ng generere komponent kommando, etterfulgt av navnet på den nye komponenten:
    ng generere komponent ui-kort
  5. Den nye komponenten vil bli opprettet i en ny mappe, inne i src/app katalog.

Hvordan legge til innhold til vinkelkomponenten

Angular oppretter hver komponent med en HTML-, CSS-, TypeScript- og Testing Specification-fil.

  • De HTML-fil lagrer HTML-innholdet til komponenten.
  • De CSS-fil lagrer stylingen av komponenten.
  • De Testspesifikasjonsfil (spec.ts). lagrer eventuelle enhetstester for komponenten.
  • De TypeScript-fil lagrer logikken og funksjonaliteten som definerer komponenten.

Legg til noe innhold til den tilpassede ui-kortkomponenten.

  1. Åpen src/app/ui-card/ui-card.component.html, og oppdater komponentens HTML. Sørg for at du har et bilde med samme navn i en mappe som heter src/assets/images i Angular-applikasjonen din. Bytt ut innholdet i ui-card.component.html med følgende:
    <div klasse="kort">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div klasse="container">
    <h4 klasse="tittel"> Blue Mountains </h4>
    <s> NSW, Australia </s>
    </div>
    </div>
  2. Åpen ui-card.component.css, og legg til CSS-innhold til komponenten:
    .kort {
    boks-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    bredde: 400px;
    polstring: 8px;
    margin: 24px;
    bakgrunnsfarge: hvit røyk;
    font-familie: sans serif;
    }
    .kortimg {
    maks bredde: 400px;
    }
    

    .tittel {
    polstring-topp: 16px;
    }
    .container {
    polstring: 2px 16px;
    }
  3. De ui-card.component.ts filen inneholder allerede en klasse for den nye komponenten der du kan legge til nye funksjoner, logikk og funksjonalitet. Det skal se slik ut:
    eksportklasse UiCardComponent redskaper OnInit {
    konstruktør() { }
     ngOnInit(): tomrom {
    // Legg til litt kodelogikk her
     }
    // Eller legg til logikken og funksjonaliteten din i nye funksjoner
    }

Slik bruker du komponenten i HTML-en til en annen komponent

Innsiden ui-card.component.ts, er det tre attributter: selector, templateUrl og styleUrl. TemplateUrl refererer til HTML-en til komponenten (og lenker derfor til HTML-filen). styleUrls-attributtet refererer til CSS-en til komponenten og lenker til CSS-filen.

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

Når du bruker UI Card-komponenten i en annen komponent, vil du bruke "app-ui-card"-velgernavnet.

  1. Først legger du til noe innhold på nettsiden din. Åpen src/app/app.component.html og legg til en navigasjonslinje:
    <div klasse="navbar-header">
    <en klasse="nav-tittel"><b> Web Navbar </b></en>
    </div>
  2. Legg til litt styling til navigasjonslinjen din src/app/app.component.css:
    .navbar-header {
    bakgrunnsfarge: #07393C;
    polstring: 30px 50px;
    vise: bøye seg;
    align-elementer: senter;
    font-familie: sans serif;
    }
    .nav-tittel {
    tekst-dekorasjon: ingen;
    farge: hvit;
    skriftstørrelse: 16pt;
    }
  3. Under navigeringslinjen inn app.component.html, legg til et nytt UI-kort. Bruk "app-ui-card"-velgernavnet som en HTML-tag:
    <app-ui-kort></app-ui-card>
  4. Du kan også gjenbruke komponenten ved å inkludere taggen flere ganger. For å gjøre det, bytt ut linjen ovenfor for å bruke flere app-ui-kort HTML-tagger i stedet:
    <div stil="display: flex">
    <app-ui-kort></app-ui-card>
    <app-ui-kort></app-ui-card>
    <app-ui-kort></app-ui-card>
    </div>
  5. Kjør Angular-applikasjonen fra terminalen ved å bruke ng tjene kommando, og åpne nettstedet ditt i en nettleser.

Hvordan sende inngangsparametere inn i komponenten

Siden komponenten er gjenbrukbar, er det attributter som du kanskje vil endre hver gang du bruker den. I dette tilfellet kan du bruke inndataparametere.

  1. Legge til Inndata til listen over importer øverst i ui-card.component.ts:
    import { Component, Input, OnInit } fra '@angular/core';
  2. Legg deretter til to inngangsvariabler i UICardComponent klasse. Disse lar deg endre stedsnavnet og bildet som vises på kortet. Fyll ut ngOnInit funksjon som vist, for å bygge banen til bildet eller bruke en standardverdi:
    eksportklasse UiCardComponent redskaper OnInit {
    @Input() stedsnavn: streng;
    @Input() bildenavn: streng;
    konstruktør() { }
     ngOnInit(): tomrom {
    hvis (dette.imageName) {
    dette.imageName = "./assets/images/" + dette.imageName;
     } ellers {
    dette.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. I ui-card.component.html, endre den hardkodede overskrift 4 "Blue Mountains"-verdien for å bruke "locationName"-inndatavariabelen i stedet. Endre også den hardkodede src attributtet i bildekoden for å bruke "imageName"-inndatavariabelen:
    <div klasse="kort">
    <img src="{{imageName}}" alt="Avatar">
    <div klasse="container">
    <h4 klasse="tittel">{{stedsnavn? stedsnavn: 'Blue Mountains'}}</h4>
    <s>NSW, Australia</s>
    </div>
    </div>
  4. I app.component.html, endre "app-ui-card"-taggene for å inkludere "locationName" og "imageName"-inndata. Angi en annen verdi for hvert UI-kortelement. Sørg for at bildefilene finnes i mappen assets/images i Angular-applikasjonen.
    <div stil="display: flex">
    <app-ui-kort [locationName]="'Blue Mountains'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
    <app-ui-kort [locationName]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
    <app-ui-kort [locationName]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Kjør Angular-applikasjonen fra terminalen ved å bruke ng tjene kommando, og åpne nettstedet ditt i en nettleser.

Du kan se en feil på dette tidspunktet om at disse egenskapene ikke har noen initialisering. I så fall er det bare å legge til eller angi "strictPropertyInitialization": usann i din tsconfig.json.

Hvordan rute til en ny komponent

Hvis komponenten din representerer en stor del av nettstedet ditt, for eksempel en ny side, kan du også rute til den komponenten.

  1. Åpen app-routing.module.ts. Importer UI-kortkomponenten øverst i filen:
    import { UiCardComponent } fra './ui-card/ui-card.component';
  2. Legg til en rutevei til rutematrisen:
    konst ruter: Ruter = [
    //... Eventuelle andre ruter du trenger...
     { bane: 'uicard', komponent: UiCardComponent },
    ]
  3. Erstatt alt gjeldende innhold i app.component.html å bare inkludere navigasjonslinjen og en ruter-uttak HTML-tag. Ruteruttaket lar deg rute mellom sider. Legg til en hyperkobling til navigasjonslinjen, med href-attributtet som samsvarer med banen i rutematrisen:
    <div klasse="navbar-header">
    <en klasse="nav-tittel"><b> Web Navbar </b></en>
    <en klasse="nav-en-lenke" href="/uicard"><b> UI-kort </b></en>
    </div>
    <ruter-uttak></router-outlet>
  4. Legg til litt styling til den nye UI-kortlenken, i app.component.css:
    .nav-a-link {
    tekst-dekorasjon: ingen;
    farge: #4b6569;
    skriftstørrelse: 14pt;
    marg-venstre: 60px;
    font-vekt: lighter;
    }
  5. Kjør Angular-applikasjonen fra terminalen ved å bruke ng tjene kommando, og åpne nettstedet ditt i en nettleser. Linken vil vises i navigasjonslinjen på nettsiden.
  6. Legg merke til URL-adressen i nettleseren din. Som standard er det vanligvis http://localhost: 4200/. Når du klikker på UI-kortkoblingen, vil siden rutes til http://localhost: 4200/uicard, og UI-kortet vises.

Opprette komponenter i Angular

En komponent er en av hovedbyggesteinene i Angular. Komponenter lar deg dele opp forskjellige deler av nettstedet ditt i mindre, gjenbrukbare deler. Du kan lage hva som helst til komponenter, inkludert mindre knapper, kort, større sidefelt og navigasjonsfelt.

Du kan også bruke inndatavariabler til å sende data på tvers av forskjellige forekomster av komponenten. Og du kan rute til komponenten ved å bruke URL-baner.

Hvis du utvikler en ny Angular-app, må du kanskje bygge en navigasjonslinje slik at brukerne dine kan navigere gjennom komponentene dine. Ved å ha en responsiv navigasjonslinje kan du se den på forskjellige enheter, på tvers av forskjellige skjermstørrelser.