От автора: рассмотрим еще один принцип того, как работают в Angular компоненты. В Angular JS можно очень просто отображать значения свойств класса в HTML-форме. Давайте рассмотрим практический пример. А именно в этом примере мы рассмотрим отображение значений различных свойств в классе на HTML- странице.
Шаг 1 — Измените код в файле app.component.ts следующим образом.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { Component } from '@angular/core'; @Component ({ selector: 'my-app', templateUrl: 'app/app.component.html' }) export class AppComponent { TutorialName: string = 'Angular JS2'; appList: string[] = ["Binding", "Display", "Services"]; } |
В приведенном выше коде необходимо отметить следующее.
Мы определяем массив с именем appList, который имеет тип string.
Мы определяем три строковых элемента в качестве составляющих массива, а именно Binding, Display, Services.
Мы также определили свойство TutorialName, которое имеет значение Angular 2.
Шаг 2 — Внесите следующие изменения в файл app/app.component.html, который является файлом шаблона.
|
1 2 3 4 5 6 |
<div> The name of this Tutorial is {{TutorialName}}<br> The first Topic is {{appList[0]}}<br> The second Topic is {{appList[1]}}<br> The third Topic is {{appList[2]}}<br> </div> |
В приведенном выше коде необходимо отметить следующее.
Мы ссылаемся на свойство TutorialName, чтобы «указать название руководства на нашей HTML-странице».
Мы используем значение индекса для массива для отображения каждого из трех его элементов.
Шаг 3 — Сохраните все изменения в коде и обновите страницу браузера, вы получите следующий результат. Вы можете четко видеть, что данные отображаются в соответствии со значениями свойств в классе.
Другой простой пример кода, который привязывается на лету — использование html-тега input. Он просто отображает данные, поскольку сами данные берутся из html-тега. Измените следующим образом файл app/app.component.html, который является файлом шаблона.
|
1 2 3 4 |
<div> <input [value] = "name" (input) = "name = $event.target.value"> {{name}} </div> |
В приведенном выше коде необходимо отметить следующее.
[value] = ”username”- используется для привязки выражения username к значению свойства элемента ввода.
(input) = ”expression”- это декларативный способ привязки выражения к входному событию элемента ввода.
username = $event.target.value — выражение, которое выполняется при запуске входящего события.
$event — в объекте $event лежат данные, которые характерны для нативного объекта событий.
Когда вы сохраните все изменения в коде и обновите страницу браузера, то получите следующий результат.
Теперь введите что-то в поле ввода, например «Tutorialspoint». Результат будет соответствующим образом изменен.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
