如何将焦点设置在角2

我的模板下拉列表的第一个列表项中包含的动态列表：如何将焦点设置在角2

<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包含列表项。所以，焦点在列表项上被调用。但是焦点状态不会显示在下拉列表的项目中。

我做错了什么？在视图完全加载后我应该这样做还是应该订阅某些内容？任何人都可以引导我走向正确的方向。

来源

2017-02-07 ShellZero

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

PS：如果你添加[attr.tabindex]="indx"它不会工作，不知道为什么呢。

这是一个Example

来源

2017-02-07 03:31:57

我们不应该使用tabindex> 0.这将混乱自然秩序。并且添加tabindex = -1不起作用！我已经试过了！我认为我必须编写一种称为open的方法，并订阅该功能并在更改时重点关注！我不确定！ :( – ShellZero

你是否从plunkr中检查过我的例子？ –

是的，我做过了，在你的例子中，元素在DOM中可用，但在我的例子中，它们不是，它们只有在下拉按钮被点击时才可用！ – ShellZero

如何将焦点设置在角2

回答

相关问题