Im vorherigen Artikel haben wir besprochen, wie Sie die Umgebung für das Angular-Projekt einrichten. Außerdem haben wir ein neues Angular-Projekt aufgesetzt. Wenn Sie es verpasst haben, lesen Sie den ersten Artikel über den folgenden Link.👇

Lass uns weitermachen.

Dies ist das Angular-Projekt, das wir im vorherigen Artikel erstellt haben.👇

Komponenten in Angular

• In einer Angular-Anwendung sind Komponenten der Hauptbaustein.
• „app.component“ ist die Standardkomponente, die bei der Installation von angle erhalten wird. Jede Komponente besteht aus vier Dateien.

1. Wiederverwendbarkeit
2. Einfacher Unit-Test
3. Leicht zu lesen.
4. Leicht zu pflegen.

• Verwenden Sie zum Erstellen einer neuen Komponente eine Eingabeaufforderung oder ein Terminal in Visual Studio Code.

Klicken Sie in der oberen Leiste des VS-Codes auf „Terminal“ und wählen Sie „Neues Terminal“.

• Um eine neue Komponente zu generieren, geben Sie am Terminal Folgendes ein: „ ng Generate Component <Komponentenname> “. (Bsp: „ ng generiere Komponente newComp “. 'newComp' ist der Name der Komponente.)
• Es erstellt vier Dateien und aktualisiert eine Datei.

• Nach dem Öffnen der erstellten Komponentendatei können Sie die oben genannten erstellten Dateien sehen.

• Nach dem Öffnen der Datei 'app.module.ts' können Sie sehen, dass die neue Komponente importiert wurde. Der Grund dafür ist, dass Angular es beim Erstellen einer Komponente automatisch aktualisiert. Die Deklaration der erstellten Komponente wird automatisch auch innerhalb des '@NgModule' deklariert.

• Öffnen Sie die Datei 'new-comp.component.ts'.
• Wählen Sie den Wert von 'selector' aus und kopieren Sie ihn in die Zwischenablage.

• Öffnen Sie die Datei 'app.component.html' und öffnen Sie ein neues Tag mit dem Wert des Selektors wie unten in der Datei 'app.component.html'.

• Öffnen Sie Ihren Browser. Es gibt Ihnen ein Ergebnis wie unten

• Betrachtet man die Ausgabe des Browsers, die „Hallo Welt!“ Nachricht kommt von 'app.component.ts'. Beim Öffnen der Datei „app.component.html“ in VS Code sehen wir „Hallo Welt!“ Text innerhalb des '<h1>'-Tags.

h1{
color : blue;
}

      

• „Neuer-Komp funktioniert!“ Nachricht kommt von 'new-comp.component.ts'. Beim Öffnen von 'new-comp.component.html' in VS Code sehen wir die Meldung "new-comp works!" Text innerhalb des '<p>'-Tags.

p{
color : grey;
font-style : italic;
}

      

• Fügen wir der 'app.component.html' einen neuen Absatz hinzu. Öffnen Sie den VS-Code und geben Sie wie unten auf "app.component.html" ein.

<p>Welcome to the first Angular project </p>

       

• Um die Absatzstile in „app.component.html“ zu ändern, öffnen Sie die Datei „app.component.css“ in VS Code und geben Sie wie folgt ein.

p{
color: red;
font-size: 20px;
}

       

Wir haben die gleichen '<p>'-Tags auf beiden Komponenten. Wir können benutzerdefinierte Stile für jedes und alles schreiben. Dafür brauchen wir also keine spezifischen IDs oder Klassen.

Wenn Ihnen dieser Artikel gefallen hat oder Sie ihn nützlich fanden, klicken Sie bitte auf den 👏-Button und folgen Sie mir für weitere Artikel wie diesen.

Weitere Inhalte unter plainenglish.io