1

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

现在我们要允许在多选项列表中使用箭头键导航。基本上我需要用来@ViewChild抓取我需要的元素并设置 .focus()它。这正是我在不同组件中所做的，并且有效。但是，在这里它不起作用。唯一的区别是，在它工作的组件中，我的*ngFor循环遍历一个divs 列表，在这种情况下，它遍历一个组件列表。

所以这归结为我无法让: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()。此外，不会抛出任何错误。

4

1 回答 1

0

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

我能够在组件内设置 HTML 元素的焦点。它导致了一个丑陋的小代码行：

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

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

于 2017-12-14T11:40:16.157 回答