Angular4專注於組件

Question

我有一個多選擇列表組件，其中包含一個復選框組件列表。 父組件具有一個CSS :focus和:hover類用於鼠標懸停。 所有可控制的元素都在選項卡索引中（因此，您可能會笨拙地使用鍵盤在復選框中進行選擇）。

現在，我們要允許多選擇列表中的箭頭鍵導航。 基本上，我需要使用@ViewChild來獲取所需的元素，並將.focus()設置.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 。