如何將焦點設置在角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

回答

相關問題