En komponent är en av de viktigaste byggstenarna i en Angular-applikation. Komponenter är återanvändbara kodbitar som utgör vissa delar av din webbplats.
Exempel på komponenter du kan skapa inkluderar mindre UI-element som knappar eller kort. De kan också inkludera större gränssnittselement som sidofält, navigeringsfält eller hela sidor.
Använda komponenter i Angular
När du skapar komponenter i en Angular-applikation kan du använda dem inom andra komponenter. Du kan till exempel skapa en komponent för ett stort UI-kortelement. Du kan sedan använda den här komponenten som en vanlig HTML-tagg, var du vill:
<app-ny-komponent></app-new-component>Eftersom komponenter är återanvändbara kodbitar kan du även skicka variabler så att data för varje instans är olika. Du kan också skapa komponenter för sidor, och du kan dirigera till dem i enlighet med detta med hjälp av app-routing.module.ts fil.
Du kan designa dina komponenter utifrån din applikations struktur och hur mycket du vill separera din funktionalitet.
Hur man skapar en komponent
Du kan använda nggenerera kommando för att skapa en ny komponent.
- Skapa en ny Vinkelapplikation använder sig av ng ny eller öppna en befintlig.
- Öppna kommandotolken eller terminalen. Alternativt, om du har din Angular-applikation öppen i en IDE som Visual Studio Code, kan du använda den inbyggda terminalen.
- I terminalen, navigera till platsen för projektets rotmapp. Till exempel:
CD C:\Users\Sharl\Desktop\Angular-Application - Springa det ng generera komponent kommando, följt av namnet på den nya komponenten:
ng generera komponent ui-kort - Den nya komponenten kommer att skapas i en ny mapp, inuti src/app katalog.
Hur man lägger till innehåll till vinkelkomponenten
Angular skapar varje komponent med en HTML-, CSS-, TypeScript- och testspecifikationsfil.
- De HTML-fil lagrar HTML-innehållet för komponenten.
- De CSS-fil lagrar komponentens styling.
- De Testningsspecifikationsfil (spec.ts). lagrar eventuella enhetstester för komponenten.
- De TypeScript-fil lagrar logiken och funktionaliteten som definierar komponenten.
Lägg till lite innehåll till den anpassade ui-kortkomponenten.
- Öppna src/app/ui-card/ui-card.component.html, och uppdatera komponentens HTML. Se till att du har en bild med samma namn i en mapp som heter src/tillgångar/bilder i din Angular-applikation. Byt ut innehållet i ui-card.component.html med följande:
<div klass="kort">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div klass="behållare">
<h4 klass="titel"> Blue Mountains </h4>
<sid> NSW, Australien </s>
</div>
</div> - Öppna ui-card.component.css, och lägg till CSS-innehåll till komponenten:
.kort {
box-skugga: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
bredd: 400px;
stoppning: 8px;
marginal: 24px;
bakgrundsfärg: vit rök;
typsnittsfamilj: sans serif;
}.kortimg {
maximal bredd: 400px;
}.titel {
stoppning-top: 16px;
}.behållare {
stoppning: 2px 16px;
} - De ui-card.component.ts filen innehåller redan en klass för den nya komponenten där du kan lägga till nya funktioner, logik och funktionalitet. Det ska se ut så här:
exporteraklass UiCardComponent redskap OnInit {
konstruktör() { }
ngOnInit(): tomhet {
// Lägg till lite kodlogik här
}
// Eller lägg till din logik och funktionalitet i nya funktioner
}
Hur man använder komponenten i HTML för en annan komponent
Inuti ui-card.component.ts, det finns tre attribut: selector, templateUrl och styleUrl. TemplateUrl refererar till komponentens HTML (och länkar därför till HTML-filen). Attributet styleUrls hänvisar till komponentens CSS och länkar till CSS-filen.
@Komponent({
väljare: 'app-ui-kort',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})När du använder UI Card-komponenten i en annan komponent kommer du att använda "app-ui-card"-väljarnamnet.
- Lägg först till lite innehåll på din webbsida. Öppna src/app/app.component.html och lägg till ett navigeringsfält:
<div klass="navbar-huvud">
<en klass="nav-titel"><b> Webbnavigeringsfält </b></a>
</div> - Lägg till lite styling till din navbar src/app/app.component.css:
.navbar-header {
bakgrundsfärg: #07393C;
stoppning: 30px 50px;
visa: böja;
align-objekt: Centrum;
typsnittsfamilj: sans serif;
}.nav-title {
text-dekoration: ingen;
Färg: vit;
textstorlek: 16pt;
} - Under navigeringsfältet in app.component.html, lägg till ett nytt UI-kort. Använd "app-ui-card"-väljarnamnet som en HTML-tagg:
<app-ui-kort></app-ui-card> - Du kan också återanvända komponenten genom att inkludera taggen flera gånger. För att göra det, ersätt raden ovan för att använda flera app-ui-kort HTML-taggar istället:
<div stil="display: flex">
<app-ui-kort></app-ui-card>
<app-ui-kort></app-ui-card>
<app-ui-kort></app-ui-card>
</div> - Kör din Angular-applikation från terminalen med hjälp av ng tjäna kommandot och öppna din webbplats i en webbläsare.
Hur man skickar indataparametrar till komponenten
Eftersom komponenten är återanvändbar finns det attribut som du kanske vill ändra varje gång du använder den. I det här fallet kan du använda inmatningsparametrar.
- Lägg till Inmatning till listan över importer högst upp i ui-card.component.ts:
importera { Component, Input, OnInit } från '@vinkel/core'; - Lägg sedan till två indatavariabler inuti UICardComponent klass. Dessa låter dig ändra platsnamnet och bilden som visas på kortet. Befolka ngOnInit fungerar som visas, för att bygga sökvägen till bilden eller använda ett standardvärde:
exporteraklass UiCardComponent redskap OnInit {
@Inmatning() platsnamn: sträng;
@Inmatning() bildnamn: sträng;konstruktör() { }
ngOnInit(): tomhet {
om (detta.imageName) {
detta.imageName = "./assets/images/" + detta.imageName;
} annan {
detta.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - I ui-card.component.html, ändra det hårdkodade värdet för Rubrik 4 "Blue Mountains" för att använda indatavariabeln "locationName" istället. Ändra även den hårdkodade src attribut i bildtaggen för att använda indatavariabeln "imageName":
<div klass="kort">
<img src="{{imageName}}" alt="Avatar">
<div klass="behållare">
<h4 klass="titel">{{platsnamn? platsnamn: 'Blue Mountains'}}</h4>
<sid>NSW, Australien</s>
</div>
</div> - I app.component.html, ändra "app-ui-card"-taggarna så att de inkluderar ingångarna "locationName" och "imageName". Ange ett annat värde för varje UI-kortelement. Se till att bildfilerna finns i mappen tillgångar/bilder i din Angular-applikation.
<div stil="display: flex">
<app-ui-kort [platsnamn]="'Blue Mountains'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-kort [platsnamn]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-kort [platsnamn]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Kör din Angular-applikation från terminalen med hjälp av ng tjäna kommandot och öppna din webbplats i en webbläsare.
Du kan se ett fel vid denna tidpunkt om att dessa egenskaper inte har någon initialiserare. Om så är fallet, lägg bara till eller ställ in "strictPropertyInitialization": false i ditt tsconfig.json.
Hur man dirigerar till en ny komponent
Om din komponent representerar en stor del av din webbplats, t.ex. en ny sida, kan du också dirigera till den komponenten.
- Öppna app-routing.module.ts. Importera UI-kortkomponenten överst i filen:
importera { UiCardComponent } från './ui-card/ui-card.component'; - Lägg till en ruttningsväg till ruttmatrisen:
konst rutter: Rutter = [
//... Andra rutter du kan behöva...
{ sökväg: 'uicard', komponent: UiCardComponent },
] - Byt ut allt aktuellt innehåll i app.component.html att endast inkludera navfältet och en HTML-tagg för router-outlet. Router-uttaget låter dig dirigera mellan sidor. Lägg till en hyperlänk till navigeringsfältet, med href-attributet som matchar sökvägen i ruttmatrisen:
<div klass="navbar-huvud">
<en klass="nav-titel"><b> Webbnavigeringsfält </b></a>
<en klass="nav-en-länk" href="/uicard"><b> UI-kort </b></a>
</div>
<router-uttag></router-outlet> - Lägg till lite styling till den nya UI-kortlänken, in app.component.css:
.nav-en-länk {
text-dekoration: ingen;
Färg: #4b6569;
textstorlek: 14pt;
marginal-vänster: 60px;
teckensnittsvikt: lättare;
} - Kör din Angular-applikation från terminalen med hjälp av ng tjäna kommandot och öppna din webbplats i en webbläsare. Länken kommer att visas i navigeringsfältet på webbsidan.
- Notera URL-adressen i din webbläsare. Som standard är det vanligtvis http://localhost: 4200/. När du klickar på UI-kortlänken kommer sidan att dirigeras till http://localhost: 4200/uicard, och UI-kortet visas.
Skapa komponenter i Angular
En komponent är en av de viktigaste byggstenarna i Angular. Komponenter låter dig dela upp olika delar av din webbplats i mindre, återanvändbara delar. Du kan göra vad som helst till komponenter, inklusive mindre knappar, kort, större sidofält och navigeringsfält.
Du kan också använda indatavariabler för att skicka data över olika instanser av komponenten. Och du kan dirigera till komponenten med hjälp av URL-sökvägar.
Om du utvecklar en ny Angular-app kan du behöva bygga ett navigeringsfält så att dina användare kan navigera genom dina komponenter. Genom att ha en responsiv navigeringsfält kan du se den på olika enheter, över olika skärmstorlekar.
