html - fokus för ng-select fungerar inte Angular 5

Jag försöker använda fokus för ng-select i Angular 5 men det fungerar inte

jag arbetar med ng2-select

Hur använder man fokus för ng-select i Angular 5?

<label class="input">
   <input (blur)="goTo()" type="text">
</label>

<label class="select" >
    <div *ngIf="items.length > 0" >
       <ng-select     #select [items]="items">
       </ng-select>
    </div>
</label>





@ViewChild('select') myElement: ElementRef;

    goTo(){
      this.myElement.element.nativeElement.focus();
    }

Svar #1

det fungerar bra för mig,

@ViewChild('ngSelect') ngSelect: NgSelectComponent;
ngAfterViewInit() {
        if (this.autofocus) {
            setTimeout(() => {
                this.ngSelect.focus();
            });
        }
    }

referera https://github.com/ng-select/ng-select/issues/762

Svar #2

Ändra detta

goTo(){
  this.myElement.element.nativeElement.focus();
}

till detta,

import { ChangeDetectorRef } from '@angular/core';

constructor (private cRef: ChangeDetectorRef) {}

// import 'SelectComponent' from your library for 'ng2-select'
goTo(){
  let el = null;
  if (this.items.length > 0) {
    this.cRef.detectChanges();
    el = (this.myElement.nativeElement as SelectComponent).element.nativeElement.querySelector('div.ui-select-container > input');
    if (el) { el.focus(); }
  }
}

Du kan behöva kontrollera om elementet är definierat eller inte (eller om du behöver ett extra 'nativeElement' där, men jag återanvänder i princip logiken här.

Bara en varningsnotering, detta kanske inte är en stabil lösning om biblioteket uppdateras för att byta namn på dessa klasser eller ändra mallen.

Hoppas det hjälper.

Relaterade artiklar