Child Components in Angular

Wie bereits zu Beginn des Tutorials erwähnt, wird in Angular das gesamte Projekt in Komponenten unterteilt. In den vorherigen Lektionen haben wir nur mit der Hauptkomponente gearbeitet, die standardmäßig erstellt wurde. Lassen Sie uns nun lernen, wie man Child Components erstellt.

Der Code für neue Komponenten wird automatisch von Angular mit einem speziellen Terminalbefehl generiert: generate component. Nach dem Wort component muss man den Namen unserer neuen Komponente schreiben. Nehmen wir an, wir möchten eine Komponente user generieren:

ng generate component user

Nach Ausführung des Befehls werden wir sehen, dass ein neuer Ordner app/user bei uns erschienen ist. In ihm befinden sich alle standardmäßigen Dateien der Komponente.

In der Komponentendatei user.component.ts wird automatisch ein Komponenten-Dekorator erstellt:

@Component({
	selector: 'app-user',
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Außerdem wird in dieser Datei automatisch die Komponenten-Klasse erstellt:

export class UserComponent {

}

Jetzt muss unsere Child Component mit der Parent Component verbunden werden. Nehmen wir an, die Parent Component sei app, die standardmäßig bei der Installation des Frameworks vorhanden ist. Importieren wir unsere Komponente dort:

import { UserComponent } from './user/user.component';

Im Komponenten-Dekorator im Schlüssel imports geben wir unsere importierte Komponente an:

@Component({
	selector: 'app-root',
	imports: [UserComponent], // hier
	templateUrl: './user.component.html',
	styleUrls: ['./user.component.css']
})

Jetzt können wir den Inhalt der Child Component in der Parent Component ausgeben. Dazu muss in der Template-Datei des Parents ein spezieller Tag geschrieben werden, dessen Name in der Eigenschaft selector des Dekorators @Component der Child Component festgelegt ist. In unserem Fall ist das der Tag app-user. Schreiben wir ihn in das Template des Parents:

some text
<app-user></app-user>

Generieren Sie eine ProductComponent. Verbinden Sie diese Komponente mit der Hauptkomponente Ihres Projekts.

Nehmen Sie Änderungen am Template der Child Component vor. Stellen Sie sicher, dass sie im Browser übernommen werden.

Ändern Sie die CSS-Stile der Child Component. Stellen Sie sicher, dass sie im Browser übernommen werden.

Erstellen Sie in der Child Component die Eigenschaften name und price. Geben Sie ihre Werte im Template der Child Component aus.