Угловой 2 — Шаблоны

В главе о компонентах мы уже видели пример следующего шаблона.

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

Это известно как встроенный шаблон . Существуют и другие способы определения шаблона, и это можно сделать с помощью команды templateURL. Простейший способ использовать это в компоненте заключается в следующем.

Синтаксис

templateURL:
viewname.component.html

параметры

• viewname — это имя модуля компонента приложения.

viewname — это имя модуля компонента приложения.

После имени представления компонент должен быть добавлен к имени файла.

Ниже приведены шаги для определения встроенного шаблона.

Шаг 1 — Создайте файл с именем app.component.html. Это будет содержать HTML-код для представления.

Шаг 2 — Добавьте следующий код в созданный выше файл.

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

Это определяет простой тег div и ссылается на свойство appTitle из класса app.component.

Шаг 3 — В файле app.component.ts добавьте следующий код.

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

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

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

Из приведенного выше кода единственное изменение, которое можно отметить, — это templateURL, который дает ссылку на файл app.component.html, который находится в папке приложения.

Шаг 4 — Запустите код в браузере, вы получите следующий вывод.

Из выходных данных видно, что файл шаблона (app.component.html) вызывается соответствующим образом.