Winkel 2 - Vorlagen

Im Kapitel über Komponenten haben wir bereits ein Beispiel für die folgende Vorlage gesehen.

template: '
   <div>
      <h1>{{appTitle}}</h1>
      <div>To Tutorials Point</div>
   </div>
'

Dies ist als bekannt inline template. Es gibt andere Möglichkeiten, eine Vorlage zu definieren. Dies kann über den Befehl templateURL erfolgen. Der einfachste Weg, dies in der Komponente zu verwenden, ist wie folgt.

Syntax

templateURL:
viewname.component.html

Parameter

viewname - Dies ist der Name des App-Komponentenmoduls.

Nach dem Viewname muss die Komponente zum Dateinamen hinzugefügt werden.

Im Folgenden finden Sie die Schritte zum Definieren einer Inline-Vorlage.

Step 1- Erstellen Sie eine Datei mit dem Namen app.component.html. Dies enthält den HTML-Code für die Ansicht.

Step 2 - Fügen Sie den folgenden Code in die oben erstellte Datei ein.

<div>{{appTitle}} Tutorialspoint </div>

Dies definiert ein einfaches div-Tag und verweist auf die appTitle-Eigenschaft aus der app.component-Klasse.

Step 3 - Fügen Sie in der Datei app.component.ts den folgenden Code hinzu.

import { Component } from '@angular/core';

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'  
})

export class AppComponent {
   appTitle: string = 'Welcome';
}

Aus dem obigen Code geht nur die Änderung aus der templateURL hervor, die den Link zur Datei app.component.html enthält, die sich im App-Ordner befindet.

Step 4 - Führen Sie den Code im Browser aus, Sie erhalten die folgende Ausgabe.

Aus der Ausgabe ist ersichtlich, dass die Vorlagendatei (app.component.html) entsprechend aufgerufen wird.