javascript - Angular4 专注于组件

Question

我有一个多选项列表组件，其中包含复选框组件列表。父组件具有用于鼠标悬停的 CSS :focus 和 :hover 类。所有可控元素都位于选项卡索引中(因此您可以笨拙地使用键盘来选择复选框)。

现在我们希望允许在多选项列表中使用箭头键导航。基本上我需要使用 @ViewChild 来获取我需要的元素并将其设置为 .focus() 。这正是我在另一个组件中所做的，并且有效。然而，在这里它不起作用。唯一的区别是，在它工作的组件中，我的 *ngFor 循环遍历 div 列表，在本例中，它遍历组件列表。

所以这归结为我无法让 :focus 伪类坚持我的组件。以下代码并不完整，只是试图让第一个元素聚焦。有点像 PoC。

MultiPicklist.component.html:

<div (keydown.ArrowDown)="arrowDownHit($event)">
  <div [hidden]="multiPicklistState === 'collapsed'" (keydown.Escape)="closeBox()" #multiPicklist>
    <app-checkbox              
      #checkboxItems
      class="multi-picklist-checkbox" 
      *ngFor="let item of picklistItemList; trackBy: trackByFunc; let i = index;"
      [fieldName]="item.value"
      [label]="item.label" 
      [chckbxId]="'multiPicklistChkbx'+title+i" 
      [tooltip]="item.tooltip" 
      [isChecked]="item.isChecked"
      (checkboxChanged)="inputChanged($event)">
    </app-checkbox>
  </div>
</div>

MultiPicklist.component.scss:

.multi-picklist-checkbox:hover, .multi-picklist-checkbox:focus{
  background-color: $multi-picklist-item-hover-bg-color;
}

MultiPicklist.component.ts:

arrowDownHit(ev){
  ev.preventDefault();
  this.multiPicklist.nativeElement.firstElementChild.focus();
}

值得一提的是 :hover 伪类可以工作，将鼠标悬停在组件上会为其提供正确的背景颜色。但不是 .focus()。此外，没有抛出任何错误。

Answer 1

这只是一种解决方法，而不是实际的答案或解决方案。

我能够在组件内设置 HTML 元素的焦点。结果是一行难看的代码:

this.multiPicklist.nativeElement.firstElementChild.lastElementChild.focus();

当然，在理想的情况下，我可以将焦点应用于整个组件，或者浏览器最终看到的任何 div。