Как получить доступ к всплывающему элементу с повторяющимся именем внутри компонента?
Я пытаюсь вызвать функцию переключения всплывающего окна внутри таблицы материалов Angular.
Если ячейка в таблице имеет фокус с вкладками, я бы хотел, чтобы всплывающее окно открывалось, когда пользователь нажимает клавишу «Ввод». Это будет имитировать поведение, когда пользователь щелкает ячейку таблицы.
Моя проблема в том, что компоненту всплывающего окна дается имя #valuePopover, которое является одним и тем же именем для всех ячеек в таблице.
<ng-container matColumnDef = "value">
<th mat-header-cell *matHeaderCellDef> Value </th>
<td mat-cell *matCellDef = "let entry;" tabindex = "0"
[satPopoverAnchorFor] = "valuePopover" (click) = "valuePopover.toggle()"
(keypress) = "openPopover($event)">
<span>{{entry.value}}</span>
<sat-popover #valuePopover hasBackdrop xAlign = "start" yAlign = "start" (closed) = "updateField(entry, $event)">Hello!
</sat-popover>
</td>
</ng-container>
Для события (щелчок) он работает нормально, так как может просто вызвать функцию 'valuePopover.toggle()'. Однако с помощью события нажатия клавиши мне нужно проверить, была ли нажата клавиша ввода, и мне нужно сделать это в компоненте.
@ViewChild('valuePopover') popover;
openPopover(event: KeyboardEvent) {
if (event.keyCode == 13) popover.toggle();
}
Функция openPopover всегда открывает всплывающее окно первой ячейки, но не той, на которой находится фокус с вкладкой!
Кто-нибудь знает, как я могу реализовать это либо в html, либо в компоненте?
Я использую компонент "sat-popover", который вы можете найти здесь: https://github.com/ncstate-sat/popover
@Diodeus-JamesMacFarlane Когда я вывожу event.currentTarget, я получаю следующее: .addEventListener:click","zone":"angular","runCount":0}],"__zone_symbol__keypressfalse":[{"type":"eventTask","state": "running","source":"HTMLTableCellElement.addEventListener:keypress","zone":"angular","runCount":2}]} Я не понимаю, как я могу получить родительский элемент из этого?
Ответы 1
Я решил это с помощью пользователя Diodeus - James McFarlane, предотвратив событие по умолчанию и вызвав метод click для event.target следующим образом:
openPopover(event) {
if (event.keyCode == 13) {
event.preventDefault();
var element:HTMLElement = event.target;
element.click();
}
}
Выйдите
eventв консоль. Вы должны видетьcurrentTarget. Отсюда вы можете определить родительский элемент DOM и инициировать событие щелчка по нему, а обработчику щелчка позволить сделать все остальное.