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” — используется для привязки выражения username к свойству value элемента input.

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

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

• $ event — это выражение, представляемое в привязках событий Angular, которое имеет значение полезной нагрузки события.

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

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

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, вы получите следующий результат.