DOM в Angular 2 — Користувальницький введення даних

19

Від автора: в Angular 2 ми можемо використовувати структуру елементів DOM HTML-сторінки для зміни значень елементів під час виконання. Давайте розглянемо докладніше, як працює в Angular DOM.

Тег input

Додайте наступний код у файл app.component.ts.

import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template:’

{{name}}


})
export class AppComponent { }

У наведеному вище коді необхідно зазначити наступне.

[value] = «username» — використовується для прив’язки вираження username до властивості value елемента вводу.

(input) = «expression» — це декларативний спосіб прив’язки до вираження входить події елемента вводу.

username = $event.target.value — вираз, який виконується при запуску вхідного події.

$event — в об’єкті $event лежатданные, які характерні для нативного об’єкта подій.

Після збереження всіх змін в коді і оновлення рядка браузера ви отримаєте наступний результат. Тепер ви можете ввести будь-який текст, і цей текст буде відображений поруч з елементом введення.

DOM в Angular 2 — Користувальницький введення даних

Введення кліка

Додайте наступний код у файл app.component.ts.

import {
Component
} from ‘@angular/core’;
@Component ({
selector: ‘my-app’,
template: ‘Click Me {{clickMessage}}’
})
export class AppComponent {
clickMessage = ‘Hello’;
onClickMe() {
this.clickMessage = ‘This tutorial!’;
}
}

Після збереження всіх змін в коді оновлення сторінки браузера ви отримаєте наступний результат.

DOM в Angular 2 — Користувальницький введення даних

Коли ви натиснете кнопку «Click Me», ви отримаєте наступний результат.

DOM в Angular 2 — Користувальницький введення даних