DOM в Angular 2 — Пользовательский ввод данных

Дата публикации: 2017-11-17

От автора: в Angular 2 мы можем использовать структуру элементов DOM HTML-страницы для изменения значений элементов во время выполнения. Давайте рассмотрим подробнее, как работает в Angular DOM.

Тег input

Добавьте следующий код в файл app.component.ts.

import { 
  Component 
} from '@angular/core'; 
 
@Component ({ 
  selector: 'my-app', 
  template: ' 
 <div> 
 <input [value] = "name" (input) = "name = $event.target.value"> 
 {{name}} 
 </div> 
  ' 
}) 
export class AppComponent { }

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

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

(input) = «expression» — это декларативный способ привязки выражения к входящему событию элемента ввода.

Практический курс по созданию веб-приложения на Angular4

Станьте профессиональным веб-разработчиком, создавая востребованные веб-приложения на Angular4.

Узнать подробнее

username = $event.target.value — выражение, которое выполняется при запуске входящего события.

$event — в объекте $event лежатданные, которые характерны для нативного объекта событий.

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

DOM в Angular 2 — Пользовательский ввод данных

Ввод клика

Добавьте следующий код в файл app.component.ts.

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

После сохранения всех изменений в коде и обновления страницы браузера вы получите следующий результат.

DOM в Angular 2 — Пользовательский ввод данных