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();
         }
    }

}

用法：我在模板的list元素上调用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包含列表项。因此，重点是在列表项上调用。但焦点状态不会显示在下拉菜单的列表项上。

我做错了吗？我应该在视图完全加载后还是应该订阅某些内容时执行此操作？任何人都可以引导我朝着正确的方向前进。

Answer 1

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

PS：如果你添加[attr.tabindex]="indx"它将无效，不知道为什么。

这是Example

如何设置焦点在Angular 2中下拉列表的第一个列表项

1 个答案: