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.

was ist der schöpferfonds auf tiktok

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.

MAKEUSEOF VIDEO DES TAGES

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.

Ein ... kreieren neue Angular-App .
Führen Sie im Terminal Ihrer Anwendung die der Generierungskomponente Befehl zum Erstellen einer neuen Komponente. Nennen Sie die neue Komponente 'about-page'.
```
ng generate component about-page
```
Im app.component.html, Ersetzen Sie den aktuellen Code durch Tags für Ihre neue Komponente:
```
<app-about-page></app-about-page>
```
Ö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:
```
@Component({ 
  selector: 'app-about-page', 
  template: '<h2>About Page</h2><br><p>This is rendering the HTML from the TypeScript file!</p>' 
}) 
```

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

@Component({ 
  selector: 'app-about-page', 
  template: `<h2>About Page</h2> 
              <br> 
              <p>This is rendering the HTML from the TypeScript file!</p>` 
})

Geben Sie im Terminal ein von dienen um Ihren Code zu kompilieren und in einem Webbrowser auszuführen. Öffnen Sie Ihre App unter http://localhost:4200/. Your HTML code from the TypeScript file will render on the page.
Im 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 einen komplexeren HTML-Code haben, der eine eigene Datei erfordert.
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html' 
})
```

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

<h2>About Page</h2> 
<p>This is rendering the HTML from the HTML file!</p>

Gehen Sie zurück zu Ihrem Browser oder führen Sie ihn erneut aus von dienen um Ihren Code neu zu kompilieren. Öffnen Sie Ihre App unter http://localhost:4200/. The browser now renders the HTML from the 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.

Ö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 unter „Stile“ Ihr CSS-Design für die Seite hinzu:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styles: ['h2 {color:red}','p {color:green}'] 
})
```
Geben Sie im Terminal ein von dienen um Ihren Code zu kompilieren und in einem Webbrowser auszuführen. Öffnen Sie Ihre App unter http://localhost:4200/ to view the styling specified in the TypeScript file.
Wenn Sie viel CSS haben, verwenden Sie 'styleUrls' anstelle von 'styles', um die TypeScript-Datei mit einer externen CSS-Datei zu verknüpfen. Im about-page.component.ts , ersetzen Sie den @Component-Decorator durch Folgendes:
```
@Component({ 
  selector: 'app-about-page', 
  templateUrl: './about-page.component.html', 
  styleUrls: ['./about-page.component.css'] 
})
```
Fügen Sie etwas CSS-Styling hinzu about-page.component.css :
```
h2 { 
  color: blue 
} 
p { 
  color: darkorange 
}
```
Gehen Sie zurück zu Ihrem Browser oder führen Sie ihn erneut aus von dienen um Ihren Code neu zu kompilieren. Öffnen Sie Ihre App unter http://localhost:4200/ to view the styles used from the external CSS file.

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.