Was sind TemplateUrls und StyleUrls in Angular?

Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Mit Angular können Sie Seiten, Dialoge oder andere Abschnitte Ihrer App in Komponenten aufteilen. Komponenten in einer Angular-Anwendung bestehen hauptsächlich aus HTML-, CSS- und TypeScript-Dateien.

In der TypeScript-Datei können Sie jede Logik hinzufügen, die für das Funktionieren der Benutzeroberfläche erforderlich ist, z. B. das Abrufen von Daten von einem Server.

Sie können den HTML- und CSS-Code der Komponente auch mit TypeScript rendern, indem Sie ihre Vorlagen- und Stilattribute angeben. Sie können templateUrl oder styleUrls verwenden, um auf externe HTML- oder CSS-Dateien zu verlinken.

Was ist das Template und die TemplateUrl in Angular?

Wenn du Erstellen Sie Ihre eigene Komponente in Angular, können Sie den HTML-Code dafür mithilfe einer Vorlage rendern. Es gibt zwei Möglichkeiten, wie Sie Ihre HTML-Vorlage schreiben können:

• Sie können Ihren HTML-Code in eine Vorlage in der TypeScript-Datei selbst schreiben.
• Sie können Ihren HTML-Code in eine externe Datei schreiben und die TypeScript-Datei mit dieser HTML-Datei verknüpfen.

In einer neuen Komponente können Sie entweder die Attribute „template“ oder „templateUrl“ festlegen, je nachdem, wo Sie Ihren HTML-Code schreiben.

1. Ein... kreieren neue Angular-App.
2. Führen Sie im Terminal Ihrer Anwendung die ng-Komponente generieren Befehl zum Erstellen einer neuen Komponente. Nennen Sie die neue Komponente "about-page".

   ng Komponente About-Seite generieren

3. In app.component.html, Ersetzen Sie den aktuellen Code durch Tags für Ihre neue Komponente:

   <App-Über-Seite></app-about-page>

4. Öffne das about-page.component.ts Datei. Wenn Sie nicht viel HTML-Code haben, können Sie das Template-Attribut verwenden, um ihn direkt in die TypeScript-Datei zu schreiben. Ersetzen Sie den @Component-Decorator durch Folgendes:

   @Komponente({
    Wähler: 'App-Über-Seite',
    Vorlage: '<h2>Über Seite</h2><Br><P>Dies rendert den HTML-Code aus der TypeScript-Datei!</P>'
   })
   

5. Wenn Sie eine mehrzeilige Vorlage einfügen möchten, können Sie stattdessen eckige Anführungszeichen verwenden:

   @Komponente({
    Wähler: 'App-Über-Seite',
    Vorlage: `<h2>Über Seite</h2>
   <Br>
   <P>Dies rendert den HTML-Code aus der TypeScript-Datei!</P>`
   })

6. Geben Sie im Terminal ein ng dienen um Ihren Code zu kompilieren und in einem Webbrowser auszuführen. Öffnen Sie Ihre App unter http://localhost: 4200/. Ihr HTML-Code aus der TypeScript-Datei wird auf der Seite gerendert.
7. In about-page.component.ts, ersetzen Sie stattdessen „template“ durch „templateUrl“. Fügen Sie den Link zur externen HTML-Datei der Komponente hinzu. Sie können „templateUrl“ verwenden, wenn Sie komplexeren HTML-Code haben, der eine eigene Datei erfordert.

   @Komponente({
    Wähler: 'App-Über-Seite',
    TemplateUrl: './about-page.component.html'
   })

8. Fügen Sie etwas HTML-Code hinzu about-page.component.html Datei:

   <h2>Über Seite</h2>
   <P>Dies rendert den HTML-Code aus der HTML-Datei!</P>

9. Gehen Sie zurück zu Ihrem Browser oder führen Sie ihn erneut aus ng dienen um Ihren Code neu zu kompilieren. Öffnen Sie Ihre App unter http://localhost: 4200/. Der Browser rendert nun den HTML-Code aus der about-page.component.html Datei.

Was sind Styles und StyleUrls in Angular?

Ähnlich wie bei HTML können Sie entweder „style“ oder „styleUrls“ verwenden, je nachdem, wo Sie Ihr CSS speichern möchten.

Sie können CSS in den TypeScript-Code einfügen, wenn Sie sehr einfache CSS-Deklarationen haben. Andernfalls können Sie „styleUrls“ verwenden, um die TypeScript-Datei mit einem externen CSS zu verknüpfen, das weitere Stile enthält.

1. Öffnen Sie in Ihrer zuvor erstellten Angular-Anwendung die about-page.component.ts Datei. Fügen Sie der Komponente ein "styles"-Attribut hinzu. Fügen Sie in "Stile" Ihren CSS-Stil für die Seite hinzu:

   @Komponente({
    Wähler: 'App-Über-Seite',
    TemplateUrl: './about-page.component.html',
    Stile: ['h2 {Farbe: rot}','p {Farbe: grün}']
   })

2. Geben Sie im Terminal ein ng dienen um Ihren Code zu kompilieren und in einem Webbrowser auszuführen. Öffnen Sie Ihre App unter http://localhost: 4200/, um den in der TypeScript-Datei angegebenen Stil anzuzeigen.
3. Wenn Sie viel CSS haben, verwenden Sie "styleUrls" anstelle von "styles", um die TypeScript-Datei mit einer externen CSS-Datei zu verknüpfen. In about-page.component.ts, ersetzen Sie den @Component-Decorator durch Folgendes:

   @Komponente({
    Wähler: 'App-Über-Seite',
    TemplateUrl: './about-page.component.html',
    styleUrls: ['./about-page.component.css']
   })

4. Fügen Sie etwas CSS-Styling hinzu about-page.component.css:

   h2 {
    Farbe blau
   }
   P {
    Farbe: dunkelorange
   }

5. Gehen Sie zurück zu Ihrem Browser oder führen Sie ihn erneut aus ng dienen um Ihren Code neu zu kompilieren. Öffnen Sie Ihre App unter http://localhost: 4200/, um die verwendeten Stile aus der externen CSS-Datei anzuzeigen.

Rendern des HTML einer Komponente in Angular

Jetzt kennen Sie die verschiedenen Möglichkeiten, wie Sie Ihre HTML- und CSS-Inhalte in einer Angular-Anwendung rendern können. Sie können anhand der Komplexität Ihres HTML- und CSS-Codes bestimmen, welchen Ansatz Sie verwenden möchten.

Bei Interesse können Sie untersuchen, wie Daten zwischen den HTML- und TypeScript-Dateien einer Angular-Komponente ausgetauscht werden.