Een component is een van de belangrijkste bouwstenen van een Angular-applicatie. Componenten zijn herbruikbare stukjes code die deel uitmaken van bepaalde delen van uw website.
Voorbeelden van componenten die u kunt maken, zijn kleinere UI-elementen zoals knoppen of kaarten. Ze kunnen ook grotere UI-elementen bevatten, zoals zijbalken, navigatiebalken of hele pagina's.
Componenten in Angular gebruiken
Wanneer u componenten maakt in een Angular-toepassing, kunt u deze binnen andere componenten gebruiken. U kunt bijvoorbeeld een component maken voor een groot UI-kaartelement. U kunt deze component vervolgens gebruiken als een gewone HTML-tag, waar u maar wilt:
<app-nieuwe-component></app-new-component>Omdat componenten herbruikbare stukjes code zijn, kunt u ook variabelen doorgeven, zodat de gegevens voor elke instantie anders zijn. U kunt ook componenten voor pagina's maken en u kunt er dienovereenkomstig naartoe leiden met behulp van de app-routing.module.ts het dossier.
U kunt uw componenten ontwerpen op basis van de structuur van uw applicatie en hoeveel u uw functionaliteit wilt scheiden.
Een component maken
U kunt de ngcommando genereren om een nieuw onderdeel te maken.
- Maak een nieuwe Hoekige toepassing gebruik makend van ng nieuw of open een bestaande.
- Open de opdrachtprompt of terminal. Als alternatief, als u uw Angular-toepassing in een IDE zoals Visual Studio Code, kunt u de ingebouwde terminal gebruiken.
- Navigeer in de terminal naar de locatie van de hoofdmap van het project. Bijvoorbeeld:
CD C:\Users\Sharl\Desktop\Angular-Application - Voer de... uit ng component genereren commando, gevolgd door de naam van het nieuwe onderdeel:
ng component ui-kaart genereren - De nieuwe component wordt aangemaakt in een nieuwe map, binnen de src/app map.
Inhoud toevoegen aan de hoekcomponent
Angular maakt elk onderdeel met een HTML-, CSS-, TypeScript- en Testspecificatie-bestand.
- De HTML-bestand slaat de HTML-inhoud van de component op.
- De CSS-bestand slaat de styling van het onderdeel op.
- De Testspecificatie (spec.ts) bestand slaat alle unit-tests voor het onderdeel op.
- De TypeScript-bestand slaat de logica en functionaliteit op die de component definiëren.
Voeg wat inhoud toe aan de aangepaste ui-kaartcomponent.
- Open src/app/ui-card/ui-card.component.html, en werk de HTML van de component bij. Zorg ervoor dat je een afbeelding met dezelfde naam hebt in een map met de naam src/assets/images in uw Angular-toepassing. Vervang de inhoud van ui-kaart.component.html met het volgende:
<div klasse="kaart">
<img src="./assets/images/blue-mountains.jpg" alt="Avatar">
<div klasse="container">
<h4 klasse="titel"> Blauwe bergen </h4>
<p> NSW, Australië </p>
</div>
</div> - Open ui-kaart.component.css, en voeg CSS-inhoud toe aan de component:
.kaart {
doos-schaduw: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
breedte: 400px;
opvulling: 8px;
marge: 24px;
Achtergrond kleur: witte rook;
font-familie: schreefloos;
}.kaartimg {
Maximale wijdte: 400px;
}.titel {
padding-top: 16px;
}.container {
opvulling: 2px 16px;
} - De ui-kaart.component.ts bestand bevat al een klasse voor de nieuwe component waar u nieuwe functies, logica en functionaliteit kunt toevoegen. Het zou er zo uit moeten zien:
exporterenklas UiCardComponent implementeert OnInit {
constructeur() { }
ngOnInit(): leegte {
// Voeg hier wat codelogica toe
}
// Of voeg uw logica en functionaliteit toe aan nieuwe functies
}
Hoe de component te gebruiken in de HTML van een andere component
Binnen ui-kaart.component.ts, zijn er drie attributen: selector, templateUrl en styleUrl. De templateUrl verwijst naar de HTML van de component (en linkt dus naar het HTML-bestand). Het attribuut styleUrls verwijst naar de CSS van de component en linkt naar het CSS-bestand.
@Component({
selector: 'app-ui-kaart',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Wanneer u de UI Card-component in een andere component gebruikt, gebruikt u de selectornaam "app-ui-card".
- Voeg eerst wat inhoud toe aan uw webpagina. Open src/app/app.component.html en voeg een navigatiebalk toe:
<div klasse="navbar-header">
<een klas ="nav-titel"><b> Web-navigatiebalk </b></a>
</div> - Voeg wat styling toe aan je navigatiebalk in src/app/app.component.css:
.navbar-header {
Achtergrond kleur: #07393C;
opvulling: 30px 50px;
Scherm: buigen;
align-items: centrum;
font-familie: schreefloos;
}.nav-titel {
tekst-decoratie: geen;
kleur: wit;
lettertypegrootte: 16pt;
} - Onder de navigatiebalk in app.component.html, voeg een nieuwe UI-kaart toe. Gebruik de selectornaam "app-ui-card" als HTML-tag:
<app-ui-kaart></app-ui-card> - U kunt de component ook hergebruiken door de tag meerdere keren op te nemen. Vervang hiervoor de bovenstaande regel om in plaats daarvan meerdere app-ui-card HTML-tags te gebruiken:
<div stijl="weergave: flex">
<app-ui-kaart></app-ui-card>
<app-ui-kaart></app-ui-card>
<app-ui-kaart></app-ui-card>
</div> - Voer uw Angular-toepassing uit vanaf de terminal met behulp van de ng serveren commando, en open uw website in een webbrowser.
Invoerparameters doorgeven aan de component
Aangezien het onderdeel herbruikbaar is, zijn er kenmerken die u mogelijk elke keer dat u het gebruikt, wilt wijzigen. In dit geval kunt u invoerparameters gebruiken.
- Toevoegen Invoer naar de lijst met importen bovenaan ui-kaart.component.ts:
importeren { Component, Ingang, OnInit } van '@hoekig/core'; - Voeg vervolgens twee invoervariabelen toe in de UICardComponent klas. Hiermee kunt u de locatienaam en afbeelding wijzigen die op de kaart worden weergegeven. Bevolken de ngOnInit functie zoals weergegeven, om het pad naar de afbeelding te bouwen of een standaardwaarde te gebruiken:
exporterenklas UiCardComponent implementeert OnInit {
@Invoer() locatie naam: snaar;
@Invoer() naam afbeelding: snaar;constructeur() { }
ngOnInit(): leegte {
als (deze.imageName) {
deze.imageName = "./assets/images/" + deze.imageNaam;
} anders {
deze.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - In ui-kaart.component.html, wijzigt u de hard gecodeerde waarde voor "Blue Mountains" in Kop 4 om in plaats daarvan de invoervariabele "locationName" te gebruiken. Verander ook de hard gecodeerde src attribuut in de afbeeldingstag om de invoervariabele "imageName" te gebruiken:
<div klasse="kaart">
<img src="{{imageName}}" alt="Avatar">
<div klasse="container">
<h4 klasse="titel">{{locatie naam? locatie naam: 'Blauwe bergen'}}</h4>
<p>NSW, Australië</p>
</div>
</div> - In app.component.html, wijzigt u de "app-ui-card"-tags om de invoer "locationName" en "imageName" op te nemen. Voer voor elk UI-kaartelement een andere waarde in. Zorg ervoor dat de afbeeldingsbestanden in de map assets/images van uw Angular-toepassing staan.
<div stijl="weergave: flex">
<app-ui-card [locatienaam]="'Blauwe bergen'" [imageName]="'blue-mountains.jpg'"></app-ui-card>
<app-ui-card [locatienaam]="'Sydney'" [imageName]="'sydney.jpg'"></app-ui-card>
<app-ui-card [locatienaam]="'Newcastle'" [imageName]="'newcastle.jpg'"></app-ui-card>
</div> - Voer uw Angular-toepassing uit vanaf de terminal met behulp van de ng serveren commando, en open uw website in een webbrowser.
Mogelijk ziet u op dit punt een fout over het feit dat deze eigenschappen geen initializer hebben. Zo ja, gewoon toevoegen of instellen "strictPropertyInitialization": false in uw tsconfig.json.
Routeren naar een nieuw onderdeel
Als uw component een groot deel van uw website vertegenwoordigt, zoals een nieuwe pagina, dan kunt u ook naar die component routeren.
- Open app-routing.module.ts. Importeer de UI Card Component bovenaan het bestand:
importeren { UiCard-component } van './ui-card/ui-card.component'; - Voeg een routeringspad toe aan de routes-array:
const routes: routes = [
//... Eventuele andere routes die u nodig heeft ...
{ pad: 'uicard', component: UiCardComponent },
] - Vervang alle huidige inhoud in app.component.html om alleen de navigatiebalk en een HTML-tag voor de router-outlet op te nemen. Met de router-outlet kunt u tussen pagina's routeren. Voeg een hyperlink toe aan de navigatiebalk, met het href-attribuut dat overeenkomt met het pad in de routes-array:
<div klasse="navbar-header">
<een klas ="nav-titel"><b> Web-navigatiebalk </b></a>
<een klas ="nav-a-link" href="/uicard"><b> UI-kaart </b></a>
</div>
<router-uitgang></router-outlet> - Voeg wat styling toe aan de nieuwe UI-kaartlink, in app.component.css:
.nav-een-link {
tekst-decoratie: geen;
kleur: #4b6569;
lettertypegrootte: 14pt;
marge-links: 60px;
lettertype dikte: aansteker;
} - Voer uw Angular-toepassing uit vanaf de terminal met behulp van de ng serveren commando, en open uw website in een webbrowser. De link verschijnt in de navigatiebalk op de webpagina.
- Noteer het URL-adres in uw webbrowser. Standaard is dit meestal http://localhost: 4200/. Wanneer u op de link van de UI-kaart klikt, wordt de pagina doorgestuurd naar: http://localhost: 4200/uicarden de UI-kaart verschijnt.
Componenten in Angular maken
Een component is een van de belangrijkste bouwstenen van Angular. Met componenten kunt u verschillende delen van uw website opsplitsen in kleinere, herbruikbare delen. U kunt van alles componenten maken, inclusief kleinere knoppen, kaarten, grotere zijbalken en navigatiebalken.
U kunt ook invoervariabelen gebruiken om gegevens door te geven aan verschillende instanties van de component. En u kunt naar de component routeren met behulp van URL-paden.
Als u een nieuwe Angular-app ontwikkelt, moet u mogelijk een navigatiebalk maken zodat uw gebruikers door uw componenten kunnen navigeren. Met een responsieve navigatiebalk kunt u deze op verschillende apparaten en op verschillende schermformaten bekijken.
