1
확인란 목록 구성 요소 목록이있는 다중 선택 목록 구성 요소가 있습니다. 부모 구성 요소에는 마우스 오버시 CSS :focus 및 :hover 클래스가 있습니다. 모든 제어 가능한 요소는 탭 색인에 있습니다 (키보드를 사용하여 확인란을 탭킹 할 수 있습니다).구성 요소에 각도 4 초점
이제 다중 선택 목록에서 화살표 키 탐색을 허용하려고합니다. 기본적으로 내가 필요한 요소를 잡고 .focus()을 설정하려면 @ViewChild을 사용해야합니다. 그리고 그것은 내가 다른 구성 요소에서했던 것과 똑같습니다. 그러나 여기서는 작동하지 않습니다. 유일한 차이점은 작동하는 구성 요소에서 *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 의사 클래스 작품, 구성 요소 위로 마우스를 가져 가면 올바른 backgro 제공 색상. 하지만 아니 .focus(). 또한 오류가 발생하지 않습니다.