Angular 2 — Шаблоны

От автора: способы определения шаблонов в Angular 2, выполяемых с помощью команды templateURL, инструкция по использованию компонента, синтаксис и параметры, примеры кода — об этом в данной статье.

В главе «Компоненты» мы уже рассмотрели пример данного шаблона.

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

Он известен, под названием встроенный шаблон. Существуют и другие способы того, как определить в Angular 2 шаблоны, которые могут быть выполнены с помощью команды 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) вызывается соответственно.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: