1
私は、チェックボックスコンポーネントのリストを格納するマルチピックリストコンポーネントを持っています。親コンポーネントには、マウスオーバーのためのCSS :focusおよび:hoverクラスがあります。すべての制御可能な要素はタブインデックスにあります（キーボードを使用してチェックボックスをタブで移動することができます）。Angular4コンポーネントのフォーカス
ここで、マルチピックリストで矢印キーのナビゲーションを許可します。基本的に私は必要な要素をつかむために@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()ではありません。さらに、エラーはスローされません。