は角2

Question

マイテンプレートのドロップダウンの最初のリスト項目にフォーカスを設定する方法動的リストが含まれています。

次のように私はフォーカスディレクティブを実装している：

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にリスト項目が含まれています。そのため、リスト項目に注目しています。しかし、フォーカス状態はドロップダウンリストの項目に表示されません。

何か間違っていますか？ビューを完全にロードした後、または何かをサブスクライブする必要があるかどうかを確認する必要がありますか？誰も私を正しい方向に導くことができますか？

Answer 1

li要素に属性tabindex="-1"を追加する必要があります。

PS：もしあなたが[attr.tabindex]="indx"を追加すると、それはうまくいかないでしょう、まだなぜわからないのですか？ここで

たちは> 0 tabindexを使用しないでくださいExample