Eine Komponente ist einer der wichtigsten Bausteine einer Angular-Anwendung. Komponenten sind wiederverwendbare Codeteile, aus denen bestimmte Bereiche Ihrer Website bestehen.
Beispiele für Komponenten, die Sie erstellen können, sind kleinere UI-Elemente wie Schaltflächen oder Karten. Sie können auch größere UI-Elemente wie Seitenleisten, Navigationsleisten oder ganze Seiten enthalten.
Verwenden von Komponenten in Angular
Wenn Sie Komponenten in einer Angular-Anwendung erstellen, können Sie sie in anderen Komponenten verwenden. Sie könnten beispielsweise eine Komponente für ein großes UI-Kartenelement erstellen. Sie können diese Komponente dann als reguläres HTML-Tag verwenden, wo immer Sie möchten:
<App-neue-Komponente></app-new-component>Da Komponenten wiederverwendbare Codeteile sind, können Sie auch Variablen übergeben, sodass die Daten für jede Instanz unterschiedlich sind. Sie können auch Komponenten für Seiten erstellen und diese entsprechend mithilfe von weiterleiten app-routing.module.ts Datei.
Sie können Ihre Komponenten basierend auf der Struktur Ihrer Anwendung entwerfen und wie weit Sie Ihre Funktionalität trennen möchten.
So erstellen Sie eine Komponente
Du kannst den... benutzen ngBefehl generieren um eine neue Komponente zu erstellen.
- Erstelle eine neue Eckige Anwendung verwenden neu oder öffnen Sie eine bestehende.
- Öffnen Sie die Eingabeaufforderung oder das Terminal. Alternativ, wenn Sie Ihre Angular-Anwendung in einem geöffnet haben IDE wie Visual Studio Code, können Sie das integrierte Terminal verwenden.
- Navigieren Sie im Terminal zum Speicherort des Stammordners des Projekts. Zum Beispiel:
CD C:\Benutzer\Sharl\Desktop\Angular-Application - Führen Sie die aus ng-Komponente generieren Befehl, gefolgt vom Namen der neuen Komponente:
ng generieren Komponente ui-Karte - Die neue Komponente wird in einem neuen Ordner innerhalb der erstellt quelle/app Verzeichnis.
So fügen Sie Inhalte zur Angular-Komponente hinzu
Angular erstellt jede Komponente mit einer HTML-, CSS-, TypeScript- und Testspezifikationsdatei.
- Das HTML-Datei speichert den HTML-Inhalt der Komponente.
- Das CSS-Datei speichert das Styling der Komponente.
- Das Testspezifikationsdatei (spec.ts). speichert alle Komponententests für die Komponente.
- Das TypeScript-Datei speichert die Logik und Funktionalität, die die Komponente definiert.
Fügen Sie der benutzerdefinierten ui-card-Komponente einige Inhalte hinzu.
- Offen src/app/ui-card/ui-card.component.html, und aktualisieren Sie den HTML-Code der Komponente. Stellen Sie sicher, dass Sie ein Bild mit demselben Namen in einem Ordner mit dem Namen haben src/assets/images in Ihrer Angular-Anwendung. Ersetzen Sie den Inhalt von ui-card.component.html mit den folgenden:
<div-Klasse="Karte">
<img src="./assets/images/blue-mountains.jpg" alt="Benutzerbild">
<div-Klasse="Container">
<h4 Klasse="Titel"> Blaue Berge </h4>
<p> NSW, Australien </p>
</div>
</div> - Offen ui-card.component.css, und fügen Sie der Komponente CSS-Inhalt hinzu:
.Karte {
Box Schatten: 0 4px 8px 0 RGB(0, 0, 0, 0.2);
Breite: 400px;
Polsterung: 8px;
Rand: 24px;
Hintergrundfarbe: weißer Rauch;
Schriftfamilie: serifenlos;
}.KarteBild {
maximale Breite: 400px;
}.Titel {
Polsterung oben: 16px;
}.Container {
Polsterung: 2px 16px;
} - Das ui-card.component.ts Datei enthält bereits eine Klasse für die neue Komponente, in der Sie neue Funktionen, Logik und Funktionalität hinzufügen können. Es sollte so aussehen:
ExportKlasse UiCardComponent implementiert OnInit {
Konstrukteur() { }
ngOnInit(): Leere {
// Fügen Sie hier etwas Codelogik hinzu
}
// Oder fügen Sie Ihre Logik und Funktionalität in neuen Funktionen hinzu
}
So verwenden Sie die Komponente im HTML einer anderen Komponente
Innen ui-card.component.ts, gibt es drei Attribute: selector, templateUrl und styleUrl. Die templateUrl verweist auf das HTML der Komponente (und verlinkt daher auf die HTML-Datei). Das Attribut styleUrls verweist auf das CSS der Komponente und verlinkt auf die CSS-Datei.
@Komponente({
Selektor: 'app-ui-card',
templateUrl: './ui-card.component.html',
styleUrls: ['./ui-card.component.css']
})Wenn Sie die UI-Kartenkomponente in einer anderen Komponente verwenden, verwenden Sie den Selektornamen „app-ui-card“.
- Fügen Sie zunächst einige Inhalte zu Ihrer Webseite hinzu. Offen src/app/app.component.html und füge eine Navigationsleiste hinzu:
<div-Klasse="Navigationsleistenkopf">
<eine Klasse="Navigationstitel"><b> Web-Navigationsleiste </b></a>
</div> - Fügen Sie Ihrer Navigationsleiste etwas Styling hinzu src/app/app.component.css:
.navbar-header {
Hintergrundfarbe: #07393C;
Polsterung: 30px 50px;
Anzeige: biegen;
Ausrichtungselemente: Center;
Schriftfamilie: serifenlos;
}.nav-Titel {
Textdekoration: keiner;
Farbe: Weiß;
Schriftgröße: 16Punkt;
} - Unterhalb der Navigationsleiste in app.component.html, fügen Sie eine neue UI-Karte hinzu. Verwenden Sie den Selektornamen „app-ui-card“ als HTML-Tag:
<App-UI-Karte></app-ui-card> - Sie können die Komponente auch wiederverwenden, indem Sie das Tag mehrmals einfügen. Ersetzen Sie dazu die obige Zeile, um stattdessen mehrere app-ui-card-HTML-Tags zu verwenden:
<div-Stil="Anzeige: flex">
<App-UI-Karte></app-ui-card>
<App-UI-Karte></app-ui-card>
<App-UI-Karte></app-ui-card>
</div> - Führen Sie Ihre Angular-Anwendung vom Terminal aus mit der ng dienen Befehl und öffnen Sie Ihre Website in einem Webbrowser.
So übergeben Sie Eingabeparameter an die Komponente
Da die Komponente wiederverwendbar ist, gibt es Attribute, die Sie möglicherweise bei jeder Verwendung ändern möchten. In diesem Fall können Sie Eingabeparameter verwenden.
- Hinzufügen Eingang zur Importliste ganz oben ui-card.component.ts:
importieren { Komponente, Eingabe, OnInit } aus '@eckig/core'; - Fügen Sie dann zwei Eingabevariablen innerhalb der hinzu UICardComponent Klasse. Mit diesen können Sie den Standortnamen und das Bild ändern, die auf der Karte angezeigt werden. Bevölkern Sie die ngOnInit Funktion wie gezeigt, um den Pfad zum Bild zu erstellen oder einen Standardwert zu verwenden:
ExportKlasse UiCardComponent implementiert OnInit {
@Eingang() Standortnamen: Schnur;
@Eingang() Bildname: Schnur;Konstrukteur() { }
ngOnInit(): Leere {
wenn (Dies.Bildname) {
Dies.imageName = "./assets/images/" + Dies.Bildname;
} anders {
Dies.imageName = "./assets/images/blue-mountains.jpg";
}
}
} - Im ui-card.component.html, ändern Sie den fest codierten Wert von Überschrift 4 „Blue Mountains“, um stattdessen die Eingabevariable „locationName“ zu verwenden. Ändern Sie auch die fest codierten Quelle -Attribut im Bild-Tag, um die Eingabevariable "imageName" zu verwenden:
<div-Klasse="Karte">
<img src="{{Bildname}}" alt="Benutzerbild">
<div-Klasse="Container">
<h4 Klasse="Titel">{{Standortnamen? Standortnamen: 'Blaue Berge'}}</h4>
<p>NSW, Australien</p>
</div>
</div> - Im app.component.html, ändern Sie die „app-ui-card“-Tags so, dass sie die Eingaben „locationName“ und „imageName“ enthalten. Geben Sie für jedes UI-Kartenelement einen anderen Wert ein. Stellen Sie sicher, dass die Bilddateien im Ordner „Assets/Images“ Ihrer Angular-Anwendung vorhanden sind.
<div-Stil="Anzeige: flex">
<app-ui-card [locationName]="'Blaue Berge'" [Bildname]="'blaue-berge.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Sydney'" [Bildname]="'Sydney.jpg'"></app-ui-card>
<app-ui-card [locationName]="'Newcastle'" [Bildname]="'newcastle.jpg'"></app-ui-card>
</div> - Führen Sie Ihre Angular-Anwendung vom Terminal aus mit der ng dienen Befehl und öffnen Sie Ihre Website in einem Webbrowser.
Möglicherweise wird an dieser Stelle ein Fehler angezeigt, dass diese Eigenschaften keinen Initialisierer haben. Wenn ja, einfach hinzufügen oder einstellen "strictPropertyInitialization": falsch in deiner tsconfig.json.
Route zu einer neuen Komponente
Wenn Ihre Komponente einen großen Teil Ihrer Website darstellt, z. B. eine neue Seite, können Sie auch zu dieser Komponente weiterleiten.
- Offen app-routing.module.ts. Importieren Sie die UI-Kartenkomponente am Anfang der Datei:
importieren { UiCard-Komponente } aus './ui-card/ui-card.component'; - Fügen Sie dem Routen-Array einen Routing-Pfad hinzu:
konst Routen: Routen = [
//... Alle anderen Routen, die Sie benötigen ...
{ Pfad: 'uicard', Komponente: UiCardComponent },
] - Ersetzen Sie den gesamten aktuellen Inhalt in app.component.html nur die Navigationsleiste und ein Router-Outlet-HTML-Tag einzuschließen. Das Router-Outlet ermöglicht es Ihnen, zwischen Seiten zu routen. Fügen Sie der Navigationsleiste einen Hyperlink hinzu, wobei das href-Attribut mit dem Pfad im Routen-Array übereinstimmt:
<div-Klasse="Navigationsleistenkopf">
<eine Klasse="Navigationstitel"><b> Web-Navigationsleiste </b></a>
<eine Klasse="nav-a-link" href="/uicard"><b> UI-Karte </b></a>
</div>
<Router-Ausgang></router-outlet> - Fügen Sie dem neuen UI-Karten-Link etwas Stil hinzu, in app.component.css:
.nav-a-link {
Textdekoration: keiner;
Farbe: #4b6569;
Schriftgröße: 14Punkt;
Rand links: 60px;
Schriftstärke: Feuerzeug;
} - Führen Sie Ihre Angular-Anwendung vom Terminal aus mit der ng dienen Befehl und öffnen Sie Ihre Website in einem Webbrowser. Der Link wird in der Navigationsleiste auf der Webseite angezeigt.
- Notieren Sie sich die URL-Adresse in Ihrem Webbrowser. Standardmäßig ist es normalerweise http://localhost: 4200/. Wenn Sie auf den Link der UI-Karte klicken, wird die Seite weitergeleitet http://localhost: 4200/uicard, und die UI-Karte wird angezeigt.
Komponenten in Angular erstellen
Eine Komponente ist einer der Hauptbausteine von Angular. Mit Komponenten können Sie verschiedene Bereiche Ihrer Website in kleinere, wiederverwendbare Teile aufteilen. Sie können alles zu Komponenten machen, einschließlich kleiner Schaltflächen, Karten, größerer Seitenleisten und Navigationsleisten.
Sie können auch Eingabevariablen verwenden, um Daten über verschiedene Instanzen der Komponente zu übergeben. Und Sie können mithilfe von URL-Pfads zur Komponente leiten.
Wenn Sie eine neue Angular-App entwickeln, müssen Sie möglicherweise eine Navigationsleiste erstellen, damit Ihre Benutzer durch Ihre Komponenten navigieren können. Mit einer reaktionsschnellen Navigationsleiste können Sie sie auf verschiedenen Geräten und mit unterschiedlichen Bildschirmgrößen anzeigen.