Angular 2 - ввод пользователя

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

Входной тег

В файле 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” - Используется для привязки имени пользователя выражения к свойству value элемента input.
(input) = ”expression” - Это декларативный способ привязки выражения к событию ввода входного элемента.
username = $event.target.value - Выражение, которое выполняется при срабатывании входного события.
$event - Это выражение, отображаемое в привязках событий Angular, которое имеет значение полезной нагрузки события.

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

Теперь вы можете вводить что угодно, и тот же ввод будет отображаться в тексте рядом с элементом управления вводом.

Нажмите "Ввод"

В файле 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!';
   }
}

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

Когда вы нажмете кнопку Click Me, вы получите следующий результат.