Wie in Angular 2

Question

Meine Vorlage auf dem ersten Listenelement eines Drop-Down-Fokus einzustellen enthält eine dynamische Liste:

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

Diese Dropdown geöffnet werden, wenn auf einer Schaltfläche geklickt, bis dann in dem DOM ist es nicht.

ich einen Fokus Richtlinie umgesetzt haben sich wie folgt:

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

} 

Verbrauch: ich die myFocus auf der Liste Element der Vorlage anzurufenden wie folgt:

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

Also, ich bin versucht, Konzentriere dich auf den ersten Listeneintrag des Drop-downs.

Wenn ich den Code debuggen, gebe ich meinen Fokuscode ein und die this._el enthält das Listenelement. Der Fokus wird also auf den Listenpunkt gelegt. Der Fokusstatus wird jedoch nicht auf dem Listenelement des Dropdownfensters angezeigt.

Mache ich etwas falsch? Soll ich das tun, nachdem die Ansicht vollständig geladen wurde oder sollte ich etwas abonnieren? Könnte mich jemand in eine richtige Richtung führen?

Answer 1

Sie müssen das Attribut tabindex="-1" zu Ihren li-Elementen hinzufügen.

PS: Wenn Sie [attr.tabindex]="indx" hinzufügen wird es nicht funktionieren, weiß nicht warum noch.

Hier ist ein Example