От автора: способы определения шаблонов в Angular 2, выполяемых с помощью команды templateURL, инструкция по использованию компонента, синтаксис и параметры, примеры кода — об этом в данной статье.
В главе «Компоненты» мы уже рассмотрели пример данного шаблона.
|
1 2 3 4 5 6 |
template: ' <div> <h1>{{appTitle}}</h1> <div>To Tutorials Point</div> </div> ' |
Он известен, под названием встроенный шаблон. Существуют и другие способы того, как определить в Angular 2 шаблоны, которые могут быть выполнены с помощью команды templateURL. Простейший способ использования этого компонента заключается в следующем. Синтаксис:
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Получить курс|
1 2 |
templateURL: viewname.component.html |
Параметры
viewname — это имя модуля компонента приложения. После viewname к имени файла нужно добавить компонент. Ниже приведены этапы определения встроенного шаблона.
Шаг 1 — Создайте файл с именем app.component.html. Он будет содержать html-код для представления.
Шаг 2 — Добавьте следующий код в созданный файл.
|
1 |
<div>{{appTitle}} Tutorialspoint </div> |
Этот код определяет простой тег div и ссылается на свойство appTitle из класса app.component.
Шаг 3 — Добавьте следующий код в файл app.component.ts.
|
1 2 3 4 5 6 7 8 9 10 |
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) вызывается соответственно.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Получить курс