Создание веб-приложения с помощью ‹Angular 2, 4, 5› стало проще по сравнению со сборкой с помощью Vanila JS, jQuery. Но были некоторые проблемы, с которыми мы сталкиваемся при работе с Angular Js или Angular. В них одна из основных проблем - обработка событий, связанных с DOM.

Из Angular мы получили класс ViewElementRef для обработки событий DOM, но это касается только одного элемента. Но обрабатывать любой элемент с его идентификатором в коде Angular также легко без класса ViewElementRef.

В сценарии, в котором мы не можем использовать класс ViewElementRef, мы собираемся динамически добавлять элементы управления вводом или любые компоненты. Чтобы ссылаться на них, добавлять или удалять стили, добавлять или удалять события, добавлять или удалять атрибуты, единственный простой подход - получить к ним доступ с помощью нашего старого простого синтаксиса:

document.getElementById (elementID)

Давайте посмотрим на пример, где у нас есть группа текстовых полей в качестве формата таблицы, и мы должны выделить границу соответствующего текстового поля в фокусе элемента. А также следует убрать выделение, когда элемент управления потерял фокус.

Давайте приступим к разработке этого приложения.

Для настройки приложения я использую Angualr cli и создаю новый компонент.

В файл .html добавьте следующий код:

‹Div›
‹table›
‹tr›
‹th * ngFor =” let key of objectKeys (originalData [0]) ”› {{key}} ‹/th›
‹/Tr›
‹tr * ngFor =» let item of originalData; let row = index; ”›
‹td * ngFor =” let key of objectKeys (item); let col = index; ”›
‹input type =” text ”[ngModel] =” item [key] ”id =” {{row}} _ {{col}} ”readonly (focus) =” focus ($ event) ”(focusout) =” focusOut ($ event) ”/›
‹/td›
‹/tr›
‹/table›
‹/div›

В файл component.ts внесите следующие изменения:

импортировать {FormsModule} из ‘ @ angular / forms ’;

@Component ({
селектор: 'my-app',
templateURL: 'XXXXXXX.html',
styleSheetsURL: 'XXXXXX.css'
})
экспортный класс App {
originalData: string;
objectKeys = Object.keys;
constructor () {
this.originalData = [
{
“ userId »: 1,
id : 1,
title : sunt aut ,
body : quia et suscipit
},
{
userId: 1,
id: 1,
title: sunt aut,
body: quia et suscipit
},
{
userId: 1,
id: 1,
title: sunt aut,
body: Quia et suscipit
}];
}
focusOut (event: any): void {
var elemId = event.explicitOriginalTarget.id;
document.getElementById (elemId) .classList.remove ('сосредоточено');
}

сфокусировано (событие: любое): void {
var elemId = event.explicitOriginalTarget.id;
document.getElementById (elemId) .classList.add ('сфокусированный');
}
}

В файле .css добавьте следующее правило css:

.focused {
border: 1px сплошной синий;
}
tr, td, th {
border: 1px сплошной черный;
}

И вы можете найти плункер для описанного выше сценария: https://embed.plnkr.co/5u3JdjvYrOmnYfAsrz8j/

Давайте обсудим здесь код машинописного текста, если вы заметили, что в коде было 2 функции focus () и focusOut (), предназначенные для выделения и удаления выделения на элементе, на котором находится фокус.

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