Noch ein weiterer Angular-Artikel, Teilkomponentenerstellung

Im vorherigen Artikel habe ich gerade über die Projekterstellung gesprochen. Ich meine, das Hauptprojekt, keine Unterprojekte. Diese werden Gegenstand eines zukünftigen Artikels sein.

Der heutige Tag steht im Zeichen der Komponentenerstellung. Und wie bei der Projekterstellung ist die Angular CLI Ihr bester Freund. Gehen Sie also weiter mit :

 
ng generieren Komponente hello-world

Die Codegenerierung wird im Ordner my-new-project/src/app/hello-world mit 4 Dateien ausgeführt :

• hello-world.component.html : die Vorlage
• hello-world.component.scss : die Stile im SCSS-Format, da dies meine Auswahl bei der Projekterstellungsaufforderung ist
• hello-world.component.spec.ts : die Testdatei
• hello-world.component.ts : die Komponente

Führen Sie nun ng Serve aus und öffnen Sie den Browser für „localhost:4200“, um das Ergebnis zu sehen
Hey, aber die Komponente wird nicht gerendert ! Warum ?
Weil wir es nicht genutzt haben :-)

Öffnen Sie nun die Stammkomponente „app.component.ts“ und fügen Sie HelloWorlComponent im Abschnitt „Importe“ hinzu:

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { HelloWorldComponent } from './hello-world/hello-world.component';
@Component({
 selector: 'app-root',
 imports: [RouterOutlet, HelloWorldComponent],
 templateUrl: './app.component.html',
 styleUrl: './app.component.scss',
})
export class AppComponent {
 title = 'angular-tutorial';
}

Die Komponente ist jetzt in AppComponent verfügbar und wir können sie verwenden. Bearbeiten Sie einfach die Datei hello-world.component.html und ersetzen Sie den gesamten Code durch Folgendes :

<app-hello-world></app-hello-world>
<router-outlet></router-outlet>

Vergessen Sie beispielsweise router-outlet, da wir die Installation von Angular Router bei der Projekterstellung nicht verhindert haben (wenn Sie kein Routing wünschen, können Sie Folgendes tun: ng new my-new-project --routing=false )

Das Standard-Selektorpräfix ist „app“, deshalb ist der Selektor der Komponente „app-hello-world“

Überprüfen Sie den Browser und Sie sehen den Standardinhalt Ihrer Komponente.

Sie können das CSS anpassen, indem Sie dies zu hello-world.component.scss hinzufügen :

:host {
 color: blueviolet
}

Überprüfen Sie den Browser und Sie sehen die neue Farbe des Textes. Der :host-Selektor bezieht sich auf die aktuelle Hello-World-Komponente.

Jetzt wissen Sie also, wie man eine einfache Komponente generiert

Einen schönen Tag noch?

[Originalbeitrag] https://rebolon.medium.com/yet-another-angular-article-part-2-components-creation-550c14b991a2

Das obige ist der detaillierte Inhalt vonNoch ein weiterer Angular-Artikel, Teilkomponentenerstellung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!