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。

Angular4专注于组件

1 个答案: