En komponent er en af ​​de vigtigste byggesten i en Angular-applikation. Komponenter er genanvendelige stykker kode, der udgør visse dele af dit websted.

Eksempler på komponenter, du kan oprette, omfatter mindre brugergrænsefladeelementer såsom knapper eller kort. De kan også omfatte større brugergrænsefladeelementer såsom sidebjælker, navigationsbjælker eller hele sider.

Brug af komponenter i Angular

Når du opretter komponenter i en Angular-applikation, kan du bruge dem i andre komponenter. For eksempel kan du oprette en komponent til et stort UI-kortelement. Du kan derefter bruge denne komponent som et almindeligt HTML-tag, hvor som helst du vil:

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

Da komponenter er genbrugelige kodestykker, kan du også sende variabler, så dataene for hver forekomst er forskellige. Du kan også oprette komponenter til sider, og du kan rute til dem i overensstemmelse hermed ved hjælp af app-routing.modul.ts fil.

Du kan designe dine komponenter ud fra strukturen af ​​din applikation, og hvor meget du vil adskille din funktionalitet.

instagram viewer

Sådan opretter du en komponent

Du kan bruge nggenerere kommando at oprette en ny komponent.

  1. Opret en ny Kantet applikation ved brug af ng nyt eller åbne en eksisterende.
  2. Åbn kommandoprompten eller terminalen. Alternativt, hvis du har din Angular-applikation åben i en IDE såsom Visual Studio Code, kan du bruge den indbyggede terminal.
  3. I terminalen skal du navigere til placeringen af ​​projektets rodmappe. For eksempel:
    cd C:\Users\Sharl\Desktop\Angular-Application
  4. Kør ng generere komponent kommando efterfulgt af navnet på den nye komponent:
    ng generere komponent ui-kort
  5. Den nye komponent oprettes i en ny mappe inde i src/app vejviser.

Sådan tilføjer du indhold til vinkelkomponenten

Angular opretter hver komponent med en HTML-, CSS-, TypeScript- og testspecifikationsfil.

  • Det HTML-fil gemmer HTML-indholdet af komponenten.
  • Det CSS fil gemmer komponentens styling.
  • Det Testspecifikationsfil (spec.ts). gemmer alle enhedstests for komponenten.
  • Det TypeScript-fil gemmer logikken og funktionaliteten, der definerer komponenten.

Tilføj noget indhold til den brugerdefinerede ui-kortkomponent.

  1. Åben src/app/ui-card/ui-card.component.html, og opdater komponentens HTML. Sørg for, at du har et billede med samme navn i en mappe med navnet src/assets/images i din Angular-applikation. Udskift indholdet af ui-card.component.html med følgende:
    <div klasse="kort">
    <img src="./assets/images/blue-mountains.jpg" alt="Avatar">
    <div klasse="beholder">
    <h4 klasse="titel"> Blå Bjerge </h4>
    <s> NSW, Australien </s>
    </div>
    </div>
  2. Åben ui-card.component.css, og føj CSS-indhold til komponenten:
    .kort {
    kasse-skygge: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    bredde: 400px;
    polstring: 8px;
    margen: 24px;
    baggrundsfarve: hvid røg;
    skrifttype-familie: sans serif;
    }
    .kortimg {
    max-bredde: 400px;
    }
    

    .titel {
    polstring-top: 16px;
    }
    .beholder {
    polstring: 2px 16px;
    }
  3. Det ui-card.component.ts filen indeholder allerede en klasse for den nye komponent, hvor du kan tilføje nye funktioner, logik og funktionalitet. Det skal se sådan ud:
    eksportklasse UiCardComponent redskaber OnInit {
    konstruktør() { }
     ngOnInit(): ugyldig {
    // Tilføj noget kodelogik her
     }
    // Eller tilføj din logik og funktionalitet i nye funktioner
    }

Sådan bruges komponenten i HTML for en anden komponent

Inde ui-card.component.ts, er der tre attributter: selector, templateUrl og styleUrl. TemplateUrl henviser til komponentens HTML (og linker derfor til HTML-filen). styleUrls-attributten refererer til komponentens CSS og links til CSS-filen.

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

Når du bruger UI Card-komponenten i en anden komponent, vil du bruge "app-ui-card"-vælgernavnet.

  1. Først skal du tilføje noget indhold til din webside. Åben src/app/app.component.html og tilføj en navbar:
    <div klasse="navbar-header">
    <en klasse ="nav-titel"><b> Web Navbar </b></en>
    </div>
  2. Tilføj lidt styling til din navbar src/app/app.component.css:
    .navbar-header {
    baggrundsfarve: #07393C;
    polstring: 30px 50px;
    Skærm: bøje;
    align-elementer: centrum;
    skrifttype-familie: sans serif;
    }
    .nav-title {
    tekst-dekoration: ingen;
    farve: hvid;
    skriftstørrelse: 16pt;
    }
  3. Under navigeringslinjen ind app.component.html, tilføje et nyt UI-kort. Brug "app-ui-card"-vælgernavnet som et HTML-tag:
    <app-ui-kort></app-ui-card>
  4. Du kan også genbruge komponenten ved at inkludere tagget flere gange. For at gøre det skal du erstatte ovenstående linje for at bruge flere app-ui-card HTML-tags 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. Kør din Angular-applikation fra terminalen ved hjælp af ng tjene kommando, og åbn dit websted i en webbrowser.

Sådan sender du inputparametre ind i komponenten

Da komponenten kan genbruges, er der attributter, som du måske vil ændre, hver gang du bruger den. I dette tilfælde kan du bruge inputparametre.

  1. Tilføje Input til listen over importer øverst i ui-card.component.ts:
    importere { Component, Input, OnInit } fra '@vinklet/core';
  2. Tilføj derefter to inputvariabler inde i UICardComponent klasse. Disse vil lade dig ændre placeringsnavnet og billedet, der vises på kortet. Befolke ngOnInit funktion som vist for at bygge stien til billedet eller bruge en standardværdi:
    eksportklasse UiCardComponent redskaber OnInit {
    @Input() placeringsnavn: snor;
    @Input() billedenavn: snor;
    konstruktør() { }
     ngOnInit(): ugyldig {
    hvis (dette.imageName) {
    dette.imageName = "./assets/images/" + dette.imageName;
     } andet {
    dette.imageName = "./assets/images/blue-mountains.jpg";
     }
     }
    }
  3. I ui-card.component.html, skal du ændre den hårdtkodede Overskrift 4 "Blue Mountains"-værdi for at bruge inputvariablen "locationName" i stedet for. Skift også den hårde kode src attribut i billedtagget for at bruge inputvariablen "imageName":
    <div klasse="kort">
    <img src="{{imageName}}" alt="Avatar">
    <div klasse="beholder">
    <h4 klasse="titel">{{placeringsnavn? placeringsnavn: 'Blå Bjerge'}}</h4>
    <s>NSW, Australien</s>
    </div>
    </div>
  4. I app.component.html, modificere "app-ui-card"-tags til at inkludere "locationName" og "imageName" input. Indtast en anden værdi for hvert UI-kortelement. Sørg for, at billedfilerne findes i mappen aktiver/billeder i din Angular-applikation.
    <div stil="display: flex">
    <app-ui-kort [placeringsnavn]="'Blå Bjerge'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
    <app-ui-kort [placeringsnavn]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
    <app-ui-kort [placeringsnavn]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
    </div>
  5. Kør din Angular-applikation fra terminalen ved hjælp af ng tjene kommando, og åbn dit websted i en webbrowser.

Du kan muligvis se en fejl på dette tidspunkt om, at disse egenskaber ikke har nogen initializer. Hvis ja, skal du blot tilføje eller indstille "strictPropertyInitialization": falsk i din tsconfig.json.

Sådan rutes til en ny komponent

Hvis din komponent repræsenterer en stor del af dit websted, såsom en ny side, så kan du også rute til den komponent.

  1. Åben app-routing.modul.ts. Importer UI-kortkomponenten øverst i filen:
    importere { UiCardComponent } fra './ui-card/ui-card.component';
  2. Tilføj en rutesti til rutearrayet:
    konst ruter: Ruter = [
    //... Eventuelle andre ruter, du måske har brug for...
     { sti: 'uicard', komponent: UiCardComponent },
    ]
  3. Erstat alt det aktuelle indhold i app.component.html kun at inkludere navbaren og et router-outlet HTML-tag. Router-udgangen giver dig mulighed for at rute mellem sider. Tilføj et hyperlink til navbaren, med href-attributten, der matcher stien i rute-arrayet:
    <div klasse="navbar-header">
    <en klasse ="nav-titel"><b> Web Navbar </b></en>
    <en klasse ="nav-et-link" href="/uicard"><b> UI-kort </b></en>
    </div>
    <router-udtag></router-outlet>
  4. Tilføj lidt styling til det nye UI-kortlink, i app.component.css:
    .nav-et-link {
    tekst-dekoration: ingen;
    farve: #4b6569;
    skriftstørrelse: 14pt;
    margin-venstre: 60px;
    skrifttype-vægt: lettere;
    }
  5. Kør din Angular-applikation fra terminalen ved hjælp af ng tjene kommando, og åbn dit websted i en webbrowser. Linket vises i navigationslinjen på websiden.
  6. Noter URL-adressen i din webbrowser. Som standard er det normalt http://localhost: 4200/. Når du klikker på UI-kortlinket, vil siden dirigeres til http://localhost: 4200/uicard, og UI-kortet vises.

Oprettelse af komponenter i Angular

En komponent er en af ​​de vigtigste byggesten i Angular. Komponenter giver dig mulighed for at dele forskellige dele af dit websted op i mindre, genbrugelige dele. Du kan lave alt til komponenter, herunder mindre knapper, kort, større sidebjælker og navigationsbjælker.

Du kan også bruge inputvariabler til at videregive data på tværs af forskellige forekomster af komponenten. Og du kan rute til komponenten ved hjælp af URL-stier.

Hvis du udvikler en ny Angular-app, skal du muligvis bygge en navigationslinje, så dine brugere kan navigere gennem dine komponenter. At have en responsiv navbar giver dig mulighed for at se den på forskellige enheder på tværs af forskellige skærmstørrelser.