javascript - 如何将焦点设置在 Angular 2 下拉列表的第一个列表项上

Question

我的模板包含一个动态列表:

<mydropdown>
    <li *ngFor="let cookie of cookies" [class.disabled]="cookie.disabled">
        <a href="#">
            <span>{{cookie}}</span>            
        </a>
    </li>
</mydropdown>

此下拉菜单在单击按钮时打开，直到那时它不在 DOM 中。

我已经实现了一个焦点指令，如下所示:

import { Directive, ElementRef, Input } from "@angular/core";

@Directive({
    selector: "[myFocus]"
})
export class Focus {
    @Input('myFocus') indx: boolean;
    constructor(private _el: ElementRef) {

    }

    ngOnInit() {
         if(this.indx){
           this._el.nativeElement.focus();
         }
    }

}

用法:我在模板的列表元素上调用 myFocus，如下所示:

<mydropdown>
        <li *ngFor="let cookie of cookies; let indx=index" [myFocus]="!indx" [class.disabled]="cookie.disabled">
            <a href="#">
                <span>{{cookie}}</span>            
            </a>
        </li>
    </mydropdown>

因此，我试图将焦点放在下拉列表的第一个列表项上。

当我调试代码时，我确实输入了我的焦点代码并且 this._el 包含列表项。因此，焦点被调用到列表项上。但是焦点状态不会显示在下拉列表的列表项中。

我做错了什么吗？我应该在 View 完全加载后执行此操作还是应该订阅某些内容？谁能指导我正确的方向。

Answer 1

您需要将属性 tabindex="-1" 添加到您的 li 元素。

PS:如果你加了[attr.tabindex]="indx"就不行了，不知道为什么。

这是一个 Example