Question

我正在尝试触发Angular Material Table中的弹出框的切换功能。

如果表中的某个单元格具有选项卡式焦点，我希望在用户按下“ Enter”键时打开弹出窗口。这将模仿用户单击表格单元格时的行为。

我的问题是，popover组件的名称为#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（）”函数。但是，对于keypress事件，我需要检查是否已按下Enter键，并且需要在组件中执行此操作。

@ViewChild('valuePopover') popover; 

openPopover(event: KeyboardEvent) {
  if(event.keyCode == 13) popover.toggle();
}

openPopover函数始终会打开第一个单元格弹出窗口的弹出窗口，但不会打开带有选项卡式焦点的弹出窗口！

有人知道我如何在html或组件中实现它吗？

我正在使用'sat-popover'组件，您可以在这里找到：https://github.com/ncstate-sat/popover

Answer 1

我在用户Diodeus-James McFarlane的帮助下解决了这一问题，方法是阻止默认事件，并按如下方式调用event.target的click方法：

openPopover(event) {
  if(event.keyCode == 13) {
    event.preventDefault();
    var element:HTMLElement = event.target;
    element.click();
  }
}

如何访问组件内部具有重复名称的popover元素？

1 个答案: